Merge pull request #20 from rei/motion-examples-update

Update motion examples
rei · Sep 19, 2018 · 8d90bc8 · 8d90bc8
2 parents 5587b74 + cbc0d53
commit 8d90bc8
Showing 1 changed file with 24 additions and 10 deletions.
diff --git a/src/components/TypeMotion.vue b/src/components/TypeMotion.vue
@@ -2,34 +2,35 @@
   <tr>
     <td>{{prop.name}}</td>
     <td>{{prop.value}}</td>
-    <td v-show="prop.name.split('-')[0] === 'duration'">
+    <td v-if="type === 'duration'">
       <div
         class="motion-example duration"
         :style="{
           'transition-duration': prop.value,
-          'transition-property': 'color',
+          'transition-property': 'background-color',
         }"
       />
     </td>
-    <td v-show="prop.name.split('-')[0] === 'timing'">
-      <!-- <div
+    <td v-if="type === 'timing'">
+      <div
         class="motion-example"
         :style="{
           'left': `${left}px`,
           'transition-timing-function': prop.value,
           'transition-duration': '500ms',
           'transition-property': 'left',
         }"
-      /> -->
+      />
     </td>
-    <td v-show="prop.name.split('-')[0] === 'rotation'">
+    <td v-if="type === 'rotation'">
       <div
         class="motion-example rotation"
         v-on:mouseover="rotate()"
         :style="{
-          'transition-duration': '400ms',
+          'transition-duration': '500ms',
           'transition-property': 'transform',
-          'transform': rotate(`${deg}deg`),
+          'transform': `rotate(${deg}deg)`,
+          'transition-timing-function': 'linear',
         }"
       />
     </td>
@@ -50,6 +51,11 @@ export default {
       deg: 0,
     };
   },
+  computed: {
+    type() {
+      return this.prop.name.split('-')[0];
+    },
+  },
   methods: {
     slide() {
       this.left = this.left === 0 ? 400 : 0;
@@ -74,13 +80,21 @@ export default {
 .motion-example {
   width: 100px;
   height: 100px;
-  background-color: #b5292b;
+  background-color: #434343;
   position: relative;
   left: 0;
 }
 
+.motion-example.duration {
+  background-color: #3278ae;
+}
+
 .motion-example.duration:hover {
-  background-color: #367c3c;
+  background-color: #b5292b;
+}
+
+.motion-example.rotation {
+  background-color: #6c9f71;
 }
 
 </style>