vue -- 过渡 & 动画

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-inmode="in-lout `

四、多组件过渡

<transition name="slide"> <component v-on:is="home"></component> </transition>

转载于:https://www.cnblogs.com/zjh-study/p/10672225.html

相关资源：使用vue-router切换页面时实现设置过渡动画