Turn vue animation summary

Using a transition class name (enter and go out there for show hidden and in line with v-if)

.v-enter,//进入前
.v-leave-to {//离开后   只需要入场动画 可以把v-leave-to删掉
      opacity: 0;
      transform: translateX(150px);
    }
.v-enter-to,
.v-leave {
        //同原始状态，一般不需要设置 } /* v-enter-active 【入场动画的时间段】 */ /* v-leave-active 【离场动画的时间段】 */ .v-enter-active, .v-leave-active{ transition: all 0.8s ease; } <transition> <h3 v-if="flag">这是一个H3</h3> </transition> 2. 使用animate.css（有进入及出去，适合显示隐藏，需要配合v-if） ``` html <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }"> <h3 v-if="flag" class="animated">这是一个H3</h3> </transition> ~~~ 3. 使用钩子函数（适合做半场动画，自动回起始点的，需要用v-if） ```javascript <div id="app"> <input type="button" value="快到碗里来" @click="flag=!flag"> <!-- 1. 使用 transition 元素把 小球包裹起来 --> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-show="flag"></div> </transition> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: false }, methods: { beforeEnter(el){ // 设置小球开始动画之前的，起始位置 el.style.transform = "translate(0, 0)" }, enter(el, done){ // 这句话，没有实际的作用，但是，如果不写，出不来动画效果； // 可以认为 el.offsetWidth 会强制动画刷新 el.offsetWidth // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态 el.style.transform = "translate(150px, 450px)" el.style.transition = 'all 1s ease' // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用 done() }, afterEnter(el){ // 动画完成之后，会调用 afterEnter // console.log('ok') this.flag = !this.flag } } }); </script>

Css3 using native control class name need not v-if appropriate as the sliding element has been left on the display screen

<style>
        .l-animate{
            transition: all 1s ease; } .l-move{ transform: translateX(500px); } </style> <div id="app"> <input type="button" value="toggle" @click="flag=!flag" > <h3 :class="{'l-animate': flag, 'l-move': flag}" @transitionend="flag=false">这是一个H3</h3> </div> <script> var vm = new Vue({ el: '#app', data: { flag: false, }, methods: {} }); </script>

Use native animate.css method for shaking v-if it is not required

<div id="app">
       <input type="button" value="toggle" @click="flag=!flag" > <transition> <h3 :class="{animated: flag, flash（animate动画名）: flag}" @animationend="flag=false">这是一个H3</h3> </transition> </div> <script> var vm = new Vue({ el: '#app', data: { flag: false, }, methods: {} }); </script>

Create a list of animations using the transition-group enables you to create fade in fade out while sliding on the list of deleted

<style>
    li {
   border: 1px dashed #999; margin: 5px; line-height: 35px; padding-left: 5px; font-size: 12px; width: 100%; } li:hover{ background-color: #ccc; transition: all 0.8s ease; } .v-enter, .v-leave-to { transform: translateY(30px); opacity: 0; } .v-enter-active, .v-leave-active{ transition: all 0.6s ease; } /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */ .v-move{ transition: all 0.6s ease; } .v-leave-active{ position: absolute; } </style> <transition-group appear tag="ul">//appear 可实现加载完成淡出效果 <li v-for="(item, i) in list" :key="item.id" @click="del(i)"> {{item.id}} --- {{item.name}} </li> </transition-group>

Use routing sub-component can also add transition tags, usage, and v-if, like, $ route using a watch to monitor changes in the name attribute tansition may vary according to the route change, and achieve the same sliding around the mobile phone APP

<transition :name="activeDirection">
        <router-view></router-view> </transition> data () { return { activeDirection: 'left' } }, watch: { $route (newVal, oldVal) { if (newVal.meta.actNum < oldVal.meta.actNum) {//在route的mate中自定义一个属性用来判断是该左滑还是右滑 this.activeDirection = 'right' } else { this.activeDirection = 'left' } } }, <style scoped> .left-enter, .right-leave-to { transform: translateX(200px); opacity: 0; } .left-enter-active, .left-leave-active { transition: all 0.6s ease; position: absolute;//设置absolut的目的是为了切换时可以同时进出，当然你也可以在transition上添加mode属性值为out-in先出后进，但是本人更偏向于设置absolut同时进出更流畅 width: 100%; } .right-enter, .left-leave-to{ transform: translateX(-200px); opacity: 0; } .right-enter-active, .right-leave-active { transition: all 0.5s ease; position: absolute; width: 100%; } </style>

Author: a493465197
link: https: //www.jianshu.com/p/23d1ff0db65a
Source: Jane book
Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.

Turn vue animation summary

Guess you like