这次给大家带来如何在项目中使用Vue+animate过渡动画，如何在项目中使用Vue+animate过渡动画的注意事项有哪些，下面就是实战案例，一起来看一下。
简介：
transition方法的使用
transition内置方法
transition-group
animate库实现过渡动画
Document [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}}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
node+token做出用户验证
node+token做出用户验证
以上就是如何在项目中使用Vue+animate过渡动画的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3186055.html
