basic setup

styles/_transitions.scss

@@ -0,0 +1,43 @@
+// Fades
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 400ms;
+}
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+.quick-fade-enter-active,
+.quick-fade-leave-active {
+    transition: opacity 100ms;
+}
+.quick-fade-enter-from,
+.quick-fade-leave-to {
+    opacity: 0;
+}
+.slow-fade-enter-active,
+.slow-fade-leave-active {
+    transition: opacity 600ms;
+}
+.slow-fade-enter-from,
+.slow-fade-leave-to {
+    opacity: 0;
+}
+
+// Slides
+.slide-up-enter-active,
+.slide-up-leave-active {
+    transition: transform 400ms var(--ease-out-quad);
+}
+.slide-up-enter-from,
+.slide-up-leave-to {
+    transform: translateY(-100%);
+}
+.slide-left-enter-active,
+.slide-left-leave-active {
+    transition: transform 400ms var(--ease-out-quad);
+}
+.slide-left-enter-from,
+.slide-left-leave-to {
+    transform: translateX(-100%);
+}