vue中需要过渡或者动画的元素,组件需要通过vue的tansition外层标签包裹起来,否则没有效果
一、过渡
HTML
<div id="app">
/* 控制动画 */
<button v-on:click="show = !show">Toggle</button>
/* 过渡内容 */
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
Tips
注意transition标签上的name属性,这个一定要有,这个算是指定过渡组件的一个前缀名,对于这些过渡中切换 class,每个都以过渡的 name 作为前缀。当你使用没有 name 的 元素时,会默认前缀为 v-。
JS
data: {show: true}
CSS
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active 在低于版本 2.1.8 中 */ {
opacity: 0;
}
1、过渡效果解析
过渡进入
之前的理解有问题,所以效果出不来,最近重新弄了一下, 发下,其实这个过渡是跟那个DOM的显示隐藏挂钩,也就意味着其实过渡的进入和离开是两个单独对应的过渡事件。
enter,leave,enter-to,leave-to都是用来写DOM的状态样式的
enter-active,leave-active里面是用来写DOM样式过渡的,比如过渡时间,过渡属性,过渡类型等等,如通过transition和animation的方式name-enter
这个表示show为true时的,DOM的初始状态name-enter-active
这个表示DOM过渡事件的过程以什么形式展示的,比如案例中就表示DOM在.5秒内容从透明度0到透明度1的过渡name-enter-to
这个表示DOM在show为true的情况下,最终状态
过渡结束name-leave
这个表示当我们点击DOM时,show从true转变为false时,DOM的初始状态,一般和DOM为true时的最终状态是一样,因此基本上这两个可以写成同一个name-leave-active
这个表示DOM过渡事件的过程以什么形式展示的,比如案例中就表示DOM在.5秒内容从透明度1到透明度0的过渡name-leave-to
这个表示show从true转变为false时,DOM过渡的最终状态,一般和DOM为true时的初始状态一样,因此基本上这两个可以写成同一个
2、CSS动画
CSS 动画用法和 CSS 过渡相同,区别是在动画中 v-enter 类名在元素插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除
HTML
<button v-on:click="show = !show">动画</button>
<transition name="bounce">
<p v-if="show">动画效果</p>
</transition>
CSS
.bounce-enter-active {
animation: bounceT 3s;
}
.bounce-leave-active {
animation: bounceT 5s reverse;
}
@keyframes bounceT {
0% {
transform: scale(0)
}
50% {
transform: scale(2)
}
100% {
transform: scale(1)
}
}
不知道什么原因?难道是vue自动animate.css,点击没有缩放,变成了别的动画效果了
1、自定义过渡类名
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
这个方法将 Vue 的过渡系统和其他现有的第三方 CSS 动画库(如 Animate.css)集成使用会非常有用,我们可以将其他动画库的类名添加给自定义类名
看下官方的案例:
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
上面的animated是Animate.css动画库的初始class类名,后面则是不同动画效果的类名
三、JS钩子函数
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
这样就可以在methods里面写方法了,也可以结合CSS/过渡使用
Tips
1、当仅使用 JavaScript 式过渡的时候, 在 enter 和 leave 钩子函数中,必须有 done 回调函数。否则,这两个钩子函数会被同步调用,过渡会立即完成
2、推荐对于仅使用 JavaScript 的过渡显式添加 v-bind:css="false",以便 Vue 可以跳过 CSS 侦测。这也可以防止 CSS 规则意外干涉到过渡
1、初始渲染过渡
指定自定义JS钩子函数
<transition
appear
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook"
v-on:appear-cancelled="customAppearCancelledHook"
>
<!-- ... -->
</transition>
2、多元素过渡
给 组件中的多个元素设置 key,被认为是一个最佳实践
建议给transition标签中的多个元素添加过渡效果时,可以采用三元表达式结合计算属性来实现
这个暂时没弄清楚?
3、过渡模式
mode="out-in
mode="in-lout
`
四、多组件过渡
<transition name="slide">
<component v-on:is="home"></component>
</transition>