update animation:fade time

examples/routers/notice.vue

@@ -1,39 +1,43 @@
 <template>
-    <Select v-model="model1" style="width:200px">
+    <div>
-        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        <p>With desc</p>
-    </Select>
+        <Button @click="info(false)">Info</Button>
+        <Button @click="success(false)">Success</Button>
+        <Button @click="warning(false)">Warning</Button>
+        <Button @click="error(false)">Error</Button>
+        <p>Only title</p>
+        <Button @click="info(true)">Info</Button>
+        <Button @click="success(true)">Success</Button>
+        <Button @click="warning(true)">Warning</Button>
+        <Button @click="error(true)">Error</Button>
+    </div>
 </template>
 <script>
     export default {
-        data () {
+        methods: {
-            return {
+            info (nodesc) {
-                cityList: [
+                this.$Notice.info({
-                    {
+                    title: 'Notification title',
-                        value: 'New York',
+                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
-                        label: 'New York'
+                });
-                    },
+            },
-                    {
+            success (nodesc) {
-                        value: 'London',
+                this.$Notice.success({
-                        label: 'London'
+                    title: 'Notification title',
-                    },
+                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
-                    {
+                });
-                        value: 'Sydney',
+            },
-                        label: 'Sydney'
+            warning (nodesc) {
-                    },
+                this.$Notice.warning({
-                    {
+                    title: 'Notification title',
-                        value: 'Ottawa',
+                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
-                        label: 'Ottawa'
+                });
-                    },
+            },
-                    {
+            error (nodesc) {
-                        value: 'Paris',
+                this.$Notice.error({
-                        label: 'Paris'
+                    title: 'Notification title',
-                    },
+                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
-                    {
+                });
-                        value: 'Canberra',
-                        label: 'Canberra'
-                    }
-                ],
-                model1: 'Sydney'
             }
         }
     }

examples/routers/tooltip.vue

@@ -1,28 +1,70 @@
+<style scoped>
+    .top,.bottom{
+        text-align: center;
+    }
+    .center{
+        width: 300px;
+        margin: 10px auto;
+        overflow: hidden;
+    }
+    .center-left{
+        float: left;
+    }
+    .center-right{
+        float: right;
+    }
+</style>
 <template>
-    <div style="margin: 200px;">
+    <div>
-        <Tooltip always placement="top-end" :content="text" :delay="1000" theme="light">
+        <div class="top">
-            <Button @click="disabled = true">延时1秒显示</Button>
+            <Tooltip content="Top Left text" placement="top-start">
-        </Tooltip>
+                <Button>Top Left</Button>
-        <Tooltip always :max-width="200" content="我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
+            </Tooltip>
-            <Button @click="handleChange">change</Button>
+            <Tooltip content="Top Center text" placement="top">
-        </Tooltip>
+                <Button>Top Center</Button>
-        <Button @click="handleChange">change</Button>
+            </Tooltip>
-        <Poptip title="Title" padding="0" width="250" word-wrap content="我的文本超级，无敌,长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长我的文本超级无敌长">
+            <Tooltip content="Top Right text" placement="top-end">
-            <Button>Click</Button>
+                <Button>Top Right</Button>
-        </Poptip>
+            </Tooltip>
+        </div>
+        <div class="center">
+            <div class="center-left">
+                <Tooltip content="Left Top text" placement="left-start">
+                    <Button>Left Top</Button>
+                </Tooltip><br><br>
+                <Tooltip content="Left Center text" placement="left">
+                    <Button>Left Center</Button>
+                </Tooltip><br><br>
+                <Tooltip content="Left Bottom text" placement="left-end">
+                    <Button>Left Bottom</Button>
+                </Tooltip>
+            </div>
+            <div class="center-right">
+                <Tooltip content="Right Top text" placement="right-start">
+                    <Button>Right Top</Button>
+                </Tooltip><br><br>
+                <Tooltip content="Right Center text" placement="right">
+                    <Button>Right Center</Button>
+                </Tooltip><br><br>
+                <Tooltip content="Right Bottom text" placement="right-end">
+                    <Button>Right Bottom</Button>
+                </Tooltip>
+            </div>
+        </div>
+        <div class="bottom">
+            <Tooltip content="Bottom Left text" placement="bottom-start">
+                <Button>Bottom Left</Button>
+            </Tooltip>
+            <Tooltip content="Bottom Center text" placement="bottom">
+                <Button>Bottom Center</Button>
+            </Tooltip>
+            <Tooltip content="Bottom Right text" placement="bottom-end">
+                <Button>Bottom Right</Button>
+            </Tooltip>
+        </div>
     </div>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                text: 'Tooltip 文字提示'
-            };
-        },
-        methods: {
-            handleChange () {
-                this.text = '提示'
-            }
-        }
     }
 </script>

src/styles/animation/fade.less

@@ -1,5 +1,5 @@
 .fade-motion(@className, @keyframeName) {
-    .make-motion(@className, @keyframeName);
+    .make-motion(@className, @keyframeName, @animation-time-quick);
     .@{className}-enter-active, .@{className}-appear {
         opacity: 0;
         animation-timing-function: linear;
@@ -27,4 +27,4 @@
     100% {
         opacity: 0;
     }
-}
+}

src/styles/animation/index.less

@@ -1,15 +1,15 @@
-.motion-common() {
+.motion-common(@time) {
-    animation-duration: @animation-time;
+    animation-duration: @time;
     animation-fill-mode: both;
 }
 
-.make-motion(@className, @keyframeName) {
+.make-motion(@className, @keyframeName, @time: @animation-time) {
     .@{className}-enter-active, .@{className}-appear {
-        .motion-common();
+        .motion-common(@time);
         animation-play-state: paused;
     }
     .@{className}-leave-active {
-        .motion-common();
+        .motion-common(@time);
         animation-play-state: paused;
     }
     .@{className}-enter-active, .@{className}-appear {
@@ -29,4 +29,4 @@
 
 .collapse-transition {
     transition: @transition-time height ease-in-out, @transition-time padding-top ease-in-out, @transition-time padding-bottom ease-in-out;
-}
+}

src/styles/custom.less

@@ -198,6 +198,7 @@
 
 // Animation
 @animation-time         : .3s;
+@animation-time-quick   : .15s;
 @transition-time        : .2s;
 @ease-in-out            : ease-in-out;