这次给大家带来如何在项目中使用Vue+animate过渡动画,如何在项目中使用Vue+animate过渡动画的注意事项有哪些,下面就是实战案例,一起来看一下。
简介:
transition方法的使用
transition内置方法
transition-group
animate库实现过渡动画
nbsp;html> <meta> <meta> <meta> <title>Document</title> <script style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15721.html" target="_blank">vue.js"></script> <link> <style> [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; } */ </style> <script> 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; } } }) } </script> <p> <input> <!-- class定义 .fade .fade-enter{} 初始状态 .fade-enter-active{} 进入过程 .fade-leave{} 离开状态 .fade-leave-active{} 离开过程 --> <transition-group> <!-- 内置方法 @before-enter = "beforeEnter" @enter = "enter" @after-enter = "afterEnter" @before-leave = "beforeLeave" @leave = "leave" @after-leave = "afterLeave" --> <!-- transition-group 多个元素运动,注意绑定key:1 --> <p> {{val}} </p> </transition-group> </p>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上就是如何在项目中使用Vue+animate过渡动画的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号