restruct: updated sass version and rules

src/styles/_animations.scss

@@ -0,0 +1,77 @@
+$animDuration: 95ms;
+$animType: ease-in-out;
+
+// List animation
+.list-anim-move,
+.list-anim-enter-active,
+.list-anim-leave-active {
+  transition: all $animDuration ease;
+}
+
+.list-anim-enter-from,
+.list-anim-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.list-anim-leave-active {
+  position: absolute;
+  width: 100%;
+}
+
+// View animation
+.view-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0.02;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+    min-height: 100%;
+  }
+}
+
+// Data status list animation
+.status-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition: all $animDuration ease-in-out;
+  }
+
+  &-leave-active {
+    transition: all $animDuration ease-in-out;
+  }
+}
+
+// Card animation
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.45);
+  }
+}
+
+// Modal animation
+.modal-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}