这篇文章将为大家详细讲解有关 Vue中CSS动画的原理是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
成都创新互联主营聂拉木网站建设的网络公司,主营网站建设方案,成都app软件开发,聂拉木h5小程序开发搭建,聂拉木网站营销推广欢迎聂拉木等地区企业咨询
(显示的过程:在动画即将被执行的瞬间,会往div上增加两个class名:fade-enter、fade-enter-active。然后去掉fade-enter,增加fade-enter-to。接着动画继续执行,到结束的瞬间,会把最后两个class去掉。)
(隐藏的过程)
为啥style标签里的class以fade开头呢?因为我在transition取名就是fade。如果不取名,默认是v(例如:v-enter、v-enter-active):
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --> <style type="text/css"> .fade-enter { opacity: 0 } .fade-enter-active { transition: opacity 3s; } .fade-leave-to { opacity: 0 } .fade-leave-active { transition: opacity 3s; } </style> </head> <body> <div id="root"> //name随便取名: <transition name="fade"> <div v-if="show">hello</div> </transition> <button @click="handleClick">切换</button> </div> <script type="text/javascript"> var vm = new Vue({ el: "#root", data: { show: true }, methods: { handleClick: function() { this.show = !this.show } } }); </script> </body> </html>
关于 Vue中CSS动画的原理是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网站名称:Vue中CSS动画的原理是什么
当前链接:https://www.cdcxhl.com/article28/gsgojp.html
成都网站建设公司_创新互联,为您提供网站改版、网站营销、搜索引擎优化、云服务器、标签优化、网站排名
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联