initial commit

1 files changed, 90 insertions, 0 deletions

diff --git a/src/styles/animations.scss b/src/styles/animations.scss
new file mode 100644
index 000000000..1e49af207
--- /dev/null
+++ b/src/styles/animations.scss
@@ -0,0 +1,90 @@
+// FadeIn
+.fadeIn-appear {
+  opacity: 0.01;
+}
+
+.fadeIn-appear.fadeIn-appear-active {
+  opacity: 1;
+  transition: opacity 0.5s ease-out;
+}
+
+.fadeIn-enter {
+  opacity: 0.01;
+  transition: opacity 0.5s ease-out;
+}
+
+.fadeIn-leave {
+  opacity: 1;
+}
+
+.fadeIn-leave.fadeIn-leave-active {
+  opacity: 0.01;
+  transition: opacity 300ms ease-in;
+}
+
+// FadeIn Fast
+.fadeIn-fast-appear {
+  opacity: 0.01;
+}
+
+.fadeIn-fast-appear.fadeIn-fast-appear-active {
+  opacity: 1;
+  transition: opacity 0.25s ease-out;
+}
+
+.fadeIn-fast-enter {
+  opacity: 0.01;
+  transition: opacity 0.25s ease-out;
+}
+
+.fadeIn-fast-leave {
+  opacity: 1;
+}
+
+.fadeIn-fast-leave.fadeIn-fast-leave-active {
+  opacity: 0.01;
+  transition: opacity 0.25s ease-in;
+}
+
+// Slide down
+.slideDown-appear {
+  max-height: 0;
+  overflow-y: hidden;
+}
+
+.slideDown-appear.slideDown-appear-active {
+  max-height: 500px;
+  transition: max-height 0.5s ease-out;
+}
+
+.slideDown-enter {
+  max-height: 0;
+  transition: max-height 0.5s ease-out;
+}
+
+// Slide up
+.slideUp-appear {
+  transform: translateY(20px);
+  opacity: 0;
+}
+
+.slideUp-appear.slideUp-appear-active {
+  transform: translateY(0px);
+  opacity: 1;
+  transition: all 0.3s ease-out;
+}
+
+.slideUp-enter {
+  transform: translateY(20px);
+  opacity: 0;
+  transition: all 0.3s ease-out;
+}
+
+.slideUp-leave {
+  opacity: 1;
+}
+
+.slideUp-leave.slideUp-leave-active {
+  opacity: 0.01;
+  transition: opacity 300ms ease-in;
+}