added move up transition for Notice

#30

added move up transition for Notice
#30
Rijn
1 parent 0b1b650d
Showing 5 changed files with 68 additions and 1 deletions Show diff stats
src/components/notice/index.js
src/styles/animation/move.less
test/app.vue
test/main.js
test/routers/notice.vue
@@ -68,7 +68,7 @@ function notice (type, options) {
         key: noticeKey.toString(),
         duration: duration,
         style: {},
-        transitionName: 'move-right',
+        transitionName: 'move-notice',
         content: content,
         onClose: onClose,
         closable: true
@@ -117,3 +117,45 @@
         opacity: 0;
     }
 }
+
+// specific transition for Notice
+
+.move-motion(move-notice, ivuMoveNotice);
+@import '../components/notice.less';
+
+@keyframes ivuMoveNoticeIn {
+    0% {
+        opacity: 0;
+        transform-origin: 0 0;
+        transform: translateX(100%);
+    }
+    100% {
+        opacity: 1;
+        transform-origin: 0 0;
+        transform: translateX(0%);
+    }
+}
+
+@keyframes ivuMoveNoticeOut {
+    0% {
+        transform-origin: 0 0;
+        transform: translateX(0%);
+        opacity: 1;
+    }
+    70% {
+        transform-origin: 0 0;
+        transform: translateX(100%);
+        height: auto;
+        padding: @notice-padding;
+        margin-bottom: @notice-margin-bottom;
+        opacity: 0;
+    }
+    100% {
+        transform-origin: 0 0;
+        transform: translateX(100%);
+        height: 0;
+        padding: 0;
+        margin-bottom: 0;
+        opacity: 0;
+    }
+}
@@ -51,6 +51,7 @@ li + li {
                 <li><a v-link="'/rate'">Rate</a></li>
                 <li><a v-link="'/upload'">Upload</a></li>
                 <li><a v-link="'/tree'">Tree</a></li>
+                <li><a v-link="'/notice'">Notice</a></li>
             </ul>
         </nav>
         <router-view></router-view>
@@ -155,6 +155,11 @@ router.map({
             require(['./routers/tree.vue'], resolve);
         }
     },
+    '/notice': {
+        component: function (resolve) {
+            require(['./routers/notice.vue'], resolve);
+        }
+    },
 });
 router.beforeEach(function () {
+<template>
+    <i-button @click="pop">Pop</i-button>
+</template>
+<script>
+    export default {
+        methods: {
+            pop () {
+                for (let i = 0; i < 6; i++) {
+                    setTimeout(() => {
+                        this.$Notice.open({
+                            title: 'test',
+                            duration: 1.5 + i
+                        });
+                    }, i * 500);
+                }
+            }
+        }
+    }
+</script>