Vue+animate在项目中做出过渡动画

这次给大家带来Vue+animate在项目中做出过渡动画，Vue+animate在项目中做出过渡动画的注意事项有哪些，下面就是实战案例，一起来看一下。

简介：

transition方法的使用

transition内置方法

transition-group 

animate库实现过渡动画

                  [v-cloak] {      display: none;    }    p {      width: 100px;      height: 100px;      background: red;      margin: 10px auto;    }    /* .fade-enter-active, .fade-leave-active {      transition: 1s all ease;    }    .fade-enter-active {      opacity: 1;      width: 300px;      height: 300px;    }    .fade-leave-active {      opacity: 0;      width: 100px;      height: 100px;    }    .fade-enter, .fade-leave {      width: 100px;      height: 100px;      opacity: 0;    } */        window.onload = function() {      new Vue({        el: '#box',        data: {          show: '',          list: ['apple', 'banana', 'orange', 'pear']        },        computed: {          lists: function() {            var arr = [];            this.list.forEach(function(val) {              if (val.indexOf(this.show) != -1) {                arr.push(val);              }            }.bind(this))            return arr;          }        }      })    }    
                              
        {{val}}      
        

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

怎样在实战项目中使用Installation插件

怎样在实战项目中使用Installation插件

以上就是Vue+animate在项目中做出过渡动画的详细内容，更多请关注【创想鸟】其它相关文章！