标签：动画 Vue 100px custom active animation duration animate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./animate.min.css" /> <script src="./vue.js"></script> <style> .box { width: 100px; height: 100px; background-color: red; } .custom-enter-active { animation-name: zoomIn; animation-duration: 10s; } .custom-leave-active { animation-name: zoomOut; animation-duration: 2s; } </style> </head> <body> <div id="app"> <input type="checkbox" v-model="show" />显示/隐藏 <hr /> <!-- 方式一: 使用自定义过渡名 --> <transition enter-active-class="animate__zoomIn" leave-active-class="animate__zoomOut" > <div class="box animate__animated" v-show="show"></div> </transition> <br /> <br /> <br /> <!-- 方式二: 使用自定义过渡名 --> <transition name="custom"> <div class="box animate__animated" v-show="show"></div> </transition> </div> <script> let vm = new Vue({ el: "#app", data: { show: true, }, }); </script> </body> </html> 效果如下：
”
标签：动画,Vue,100px,custom,active,animation,duration,animate 来源： https://www.cnblogs.com/yangcaicai/p/14191595.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。