applied styling to animation preview

bemijonathan · bemijonathan · commit 02bba141b172 · 2020-05-27T14:14:05.000+01:00
diff --git a/demo/report.20200526.101148.3406.0.001.json b/demo/report.20200526.101148.3406.0.001.json
diff --git a/demo/src/assets/animations.js b/demo/src/assets/animations.js
@@ -36,7 +36,7 @@ export default [
     class: 'tilt-in'
   },
   {
-    name: 'Flip in',
-    class: 'flip-in'
+    name: 'Flip X',
+    class: 'flip-x'
   }
 ];
diff --git a/demo/src/components/Content.vue b/demo/src/components/Content.vue
@@ -1,12 +1,6 @@
 <template>
-  <div>
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi iste harum
-    animi quidem rem rerum laboriosam corporis dolore sit aut consequatur,
-    deleniti numquam placeat eveniet laborum totam sunt sapiente modi enim quo.
-    Minima, nesciunt natus amet perspiciatis incidunt ipsum veritatis qui ipsa
-    sunt velit vel, dolores eos, necessitatibus laborum quia? Nisi, totam libero
-    consequatur autem nobis ipsa provident neque cupiditate animi dolorem dolore
-    perspiciatis ipsum nesciunt qui voluptas nam? Saepe?
+  <div class="dummy">
+    Lorem
   </div>
 </template>
 
@@ -16,4 +10,17 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+  .dummy{
+    width: 300px;
+    margin: auto;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    background:#44a1df;
+    font-size:40px;
+    height:300px;
+    color:white;
+    border-radius:10px;
+  }
+</style>
diff --git a/dist/index.min.css b/dist/index.min.css
diff --git a/src/flip-in.css b/src/flip-in.css
diff --git a/src/flip-x.css b/src/flip-x.css
@@ -0,0 +1,11 @@
+  .flip-x-enter,
+  .flip-x-leave-to{
+    transform: rotateY(-80deg);
+    opacity: 0;
+  }
+  
+  .flip-x-enter-active,
+  .flip-x-leave-active{
+      transition:  transform 0.5s, opacity 0.3s;
+  }  
+  
diff --git a/src/roll-in-left.css b/src/roll-in-left.css
@@ -1,7 +1,7 @@
 /* roll in animation */
 .roll-in-left-enter,
 .roll-in-left-leave-to{
-    transform: translateX(-800px) rotate(-540deg);
+    transform: translateX(-500px) rotate(-200deg);
     opacity: 0;
 }
 
diff --git a/src/rotate.css b/src/rotate.css
@@ -8,5 +8,5 @@
 
 .rotate-enter-active,
 .rotate-leave-active{
-    transition:  transform 0.3s, opacity 0.5s ;
+    transition:  transform 0.7s, opacity 0.5s ;
 }
diff --git a/src/scale-in.css b/src/scale-in.css
@@ -2,7 +2,7 @@
 /* scalle in animation */
 .scale-in-enter,
 .scale-in-leave-to{
-   transform: scale(0);
+   transform: scale(0.88);
    opacity: 0;
 }
 
diff --git a/src/tilt-in.css b/src/tilt-in.css
@@ -8,5 +8,5 @@
 
 .tilt-in-enter-active,
 .tilt-in-leave-active{
-    transition:  transform 0.3s, opacity 0.5s ;
+    transition: ease-out  transform 0.4s, opacity 0.3s ;
 }

Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ export default [`
`36`	`36`	`class: 'tilt-in'`
`37`	`37`	`},`
`38`	`38`	`{`
`39`		`- name: 'Flip in',`
`40`		`- class: 'flip-in'`
	`39`	`+ name: 'Flip X',`
	`40`	`+ class: 'flip-x'`
`41`	`41`	`}`
`42`	`42`	`];`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`/* roll in animation */`
`2`	`2`	`.roll-in-left-enter,`
`3`	`3`	`.roll-in-left-leave-to{`
`4`		`- transform: translateX(-800px) rotate(-540deg);`
	`4`	`+ transform: translateX(-500px) rotate(-200deg);`
`5`	`5`	`opacity: 0;`
`6`	`6`	`}`
`7`	`7`
Original file line number	Diff line number	Diff line change
`@@ -8,5 +8,5 @@`
`8`	`8`
`9`	`9`	`.rotate-enter-active,`
`10`	`10`	`.rotate-leave-active{`
`11`		`- transition: transform 0.3s, opacity 0.5s ;`
	`11`	`+ transition: transform 0.7s, opacity 0.5s ;`
`12`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`/* scalle in animation */`
`3`	`3`	`.scale-in-enter,`
`4`	`4`	`.scale-in-leave-to{`
`5`		`- transform: scale(0);`
	`5`	`+ transform: scale(0.88);`
`6`	`6`	`opacity: 0;`
`7`	`7`	`}`
`8`	`8`
Original file line number	Diff line number	Diff line change
`@@ -8,5 +8,5 @@`
`8`	`8`
`9`	`9`	`.tilt-in-enter-active,`
`10`	`10`	`.tilt-in-leave-active{`
`11`		`- transition: transform 0.3s, opacity 0.5s ;`
	`11`	`+ transition: ease-out transform 0.4s, opacity 0.3s ;`
`12`	`12`	`}`