vue.js之过渡动画

vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中，在通过css修改样式即可满足需求
命名该动画的样式使用 .v-enter等过渡类名来定义动画如<transition name="tr"></transition> 的类名为 .tr-enter
vue一共提供了6个过渡类名，官方文档的解释有一些拗口，我决定以点击显示底部弹框为例解释6个类名的状态

v-enter: 弹框显示前的样式，过渡的开始状态, 也就是动画还没开始前，动画的起始位置
v-enter-active 动画生效的状态，从底部过渡到页面的过程
v-enter-to 动画执行完的结束状态，也就是弹出结束后显示在页面的样式
v-leave 隐藏元素，离开动画的开始状态，元素消失开始的样式
v-leave-active 隐藏元素过程中，离开动画的生效动态即离开的过程，从上到下滑
v-leave-to 隐藏元素完成，离开动画的结束状态(此时v-leave的样式被删除)

用通俗的语句解释完6个状态后开始书写样式，将点击显示/点击隐藏两个动作分解



// 点击显示弹窗的动画

// 弹框出现前的样式

.slide-enter{

   transform: translate3d(0,100%,0)

}

// 从下往上弹出的过程，即过渡效果的样式

.slide-enter-active{

    transition:all 0.5s

}

// 弹框弹出的动画结束,即显示在页面底部

.slide-enter-to{

    transform: translate3d(0,0,0)

}

// 点击隐藏弹框的动画

// 弹框隐藏前的样式，此时在页面底部

.slide-leave{

    transform: translate3d(0,100%,0)

}

// 弹框从上往下滑的过渡效果

.slide-leave-active{

    transition:all 0.5s

}

// 弹框滑出页面底部即隐藏:这一步骤的样式可以忽略不写，因为在slide-leave-to这个状态时v-leave的样式已经被删除 v-show为false弹框隐藏,弹框隐藏的样式

.slide-leave-to{

     transform: translate3d(0,100%,0)

}

有时候过渡元素时需要条件渲染，如果渲染的两个标签是相同的，需要用key唯一值来区别。代码如下



&lt;transition&gt;

    &lt;div&gt;

        &lt;button v-if="flag" :key="submit"&gt;submit&lt;/button&gt;

        &lt;button v-else :key="cancel"&gt;cancel&lt;/button&gt;

    &lt;/div&gt;

&lt;/transition&gt;

假如在这个基础下增加一个需求，先隐藏submit按钮再显示cancel，即离开和开始的动画同时进行。可以使用过渡模式来解决问题。
mode="out-in" 当前元素先进行过渡，过渡结束后新元素再进行过渡
mode="in-out" 新元素先进行过渡，过渡结束当前元素再过渡

过渡列表

除了单个标签过渡外，在实际开发中肯定还会涉及到列表过渡。例如往一个列表添加或删除一条数据。
例如下图，动态添加或删除一个数组中的数字，插入的数字和原有的都要有一个过渡的动画。在这种情况下需要使用<transition-group><transition-group>过渡组件，具体代码如下

组件的结构如下



&lt;template&gt;

    &lt;div class="number-wrapper"&gt;

        &lt;button @click="add"&gt;add&lt;/button&gt;

        &lt;button @click="remove"&gt;remove&lt;/button&gt;

        &lt;div class="list"&gt;

            &lt;transition-group name="fade"&gt;

                //注意，在transition-group下:key的值不能够是index

                &lt;span v-for="(item) in list" :key="item" class="item"&gt;{{item}}&lt;/span&gt;

            &lt;/transition-group&gt;

        &lt;/div&gt;

    &lt;/div&gt;

&lt;/template&gt;

js代码



&lt;script&gt;

export default {

  data () {

    return {

      list: [1]

    }

  },

  methods: {

    add () {

      // 获取当前数组长度

      let num = this.list.length

      // 获取随机位置

      let index = Math.floor(Math.random() * num)

      // 添加下一个数字到随机位置

      this.list.splice(index, 0, num + 1)

    },

    remove () {

      let num = this.list.length

      let index = Math.floor(Math.random() * num)

      //随机移除一个数字

      this.list.splice(index, 1)

    }

  }

}

&lt;/script&gt;

css部分



.fade-enter,

    .fade-leave-to

     opacity:0

     transform:translateY(20px)

    .fade-leave-active

     position: absolute

    .item

        margin-right: 10px

        display: inline-block

        transition: all 0.5s

来源：https://segmentfault.com/a/1190000017543505

巴特西

vue.js之过渡动画

过渡列表

最新文章

热门文章