过渡效果

transition 是Vue 提供的封装组件。

条件渲染（使用v-if）、条件展示（使用 v-show）、动态组件、组件根节点

当插入或删除包含在transition 组件元素时，Vue 将会做以下处理：

1. 自动嗅探目标元素是否应用了CSS 过度或动画，如果是，在恰当的时机添加／删除CSS 类名。

2. 如果过度组件提供了JavaScript 钩子函数，这些钩子函数将恰当的时机被调用。

3. 如果没找到JavaScript 钩子并且也没有监测到CSS 过渡／动画，DOM 操作（插入／删除）在下一帧中立即执行。

过渡的-CSS-类名

<transition name="my-transition"> //可重置前缀

 1         /*     v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除；
 2             v-enter-active：定义过渡的状态。元素整个过渡过程中作用，在元素被插入时生效
 3             v-enter-to 定义进入过渡的结束状态
 4         */
 5         .test-enter,.test-enter-active,.test-enter-to{
 6             transition:opacity 1s; background: green
 7         }
 8         /*  v-leave：定义来开过渡的开始状态。
 9             v-leave-active：定义过渡的状态
10             v-leave-to 定义离开过渡的状态
11         */
12         .test-leave,.test-leave-active,.test-leave-to{
13             transition:opacity 2s; background: yellow
14         }

CSS 过渡

 1     .test-enter-active{
 2         transition: all 0.5s linear
 3     }
 4     
 5     .test-leave-active{
 6         transition: all 0.5s linear
 7     }
 8     .test-enter, .test-leave-to{
 9         transform: translateX(100px);
10         opacity: 0;
11     }

CSS 动画

 1     .test-enter-active{
 2         animation: test-in .5s;
 3     }
 4     .test-leave-active{
 5         animation: test-in .5s reverse
 6     }
 7     @keyframes test-in{
 8         0%{
 9             transform:scale(0);
10         }
11         50%{
12             transform: scale(1.5);
13         }
14         100%{
15             transform: scale(1)
16         }
17     }

自定义过渡类名

通过自定义过渡类名，优先级高于普通类名。对于Vue 的过渡系统和其他第三方CSS 动画库，如Animate.css 结合使用非常有用。

 

 

enter-class enter-active-class enter-to-class
leave-class leave-active-class leave-to-class 
        <transition name="test" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">

显性的过渡效果持续时间

<transition name="test"  :duration="{enter:500,leave:800}">

JavaScript 钩子

 

posted @ 2017-08-15 22:50  会爬树的猪日月  阅读(102)  评论(0)    收藏  举报