update

Author: nuochong

app/app.scss

@@ -16,18 +16,6 @@
 
 @import './css/animate.css';
 
-.animateicon {
-  color: red;
-  animation-name: bounceInOpacity;
-  animation-duration: 1s;
-  animation-delay: 0.5s;
-}
-
-.extra-bold {
-  font-family: 'Assistant-ExtraBold', 'Assistant ExtraBold';
-  font-weight: 800;
-}
-
 .bold {
   font-family: 'Assistant-Bold', 'Assistant';
   font-weight: 700;
@@ -38,49 +26,6 @@
   font-weight: 600;
 }
 
-@keyframes bounceInOpacity {
-  from,
-  20%,
-  40%,
-  60%,
-  80%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-
-  0% {
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  20% {
-    -webkit-transform: scale3d(1.1, 1.1, 1.1);
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  40% {
-    -webkit-transform: scale3d(0.9, 0.9, 0.9);
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-
-  60% {
-    -webkit-transform: scale3d(1.03, 1.03, 1.03);
-    transform: scale3d(1.03, 1.03, 1.03);
-  }
-
-  80% {
-    -webkit-transform: scale3d(0.97, 0.97, 0.97);
-    transform: scale3d(0.97, 0.97, 0.97);
-  }
-
-  to {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-
 .hello-world {
   margin: 20;
 }

app/components/example/animate.vue

@@ -1,8 +1,8 @@
 <template>
-  <Page  class="page" loaded="pageLoaded" ref="page">
+  <Page class="page" loaded="pageLoaded" ref="page">
     <ActionBarSecond :title="'动画效果'"></ActionBarSecond>
 
-    <GridLayout colums="*" rows="*" id="dd">
+    <GridLayout colums="*" rows="*">
       <Label class="animateicon" :text="msg" col="0" row="0" />
       <Image class="animateicon" src="~/assets/images/NativeScript-Vue.png" />
     </GridLayout>
@@ -26,4 +26,51 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.animateicon {
+  color: red;
+  animation-name: bounceInOpacity;
+  animation-duration: 1s;
+  animation-delay: 0.5s;
+}
+@keyframes bounceInOpacity {
+  from,
+  20%,
+  40%,
+  60%,
+  80%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  0% {
+    -webkit-transform: scale3d(0.3, 0.3, 0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  20% {
+    -webkit-transform: scale3d(1.1, 1.1, 1.1);
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    -webkit-transform: scale3d(0.9, 0.9, 0.9);
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  60% {
+    -webkit-transform: scale3d(1.03, 1.03, 1.03);
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    -webkit-transform: scale3d(0.97, 0.97, 0.97);
+    transform: scale3d(0.97, 0.97, 0.97);
+  }
+
+  to {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
 </style>

app/components/project/home.vue

@@ -30,6 +30,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.extra-bold {
+  font-family: 'Assistant-ExtraBold', 'Assistant ExtraBold';
+  font-weight: 800;
+}
+
 #home {
   animation-name: bounceIn;
 }