<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./animate.css"> <script src="./vue.js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --> <style> .myfade-enter, .v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: opacity 1s; } </style> </head> <body> <div id="root"> <transition name="myfade"> <div v-if="show">hello</div> <div v-else>bye</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>
(像上面这种加了style并不会实现渐变效果,因为vue默认是会尽量复用dom,想要vue不复用dom,要给其加上不同的key值)
专注于为中小企业提供成都网站建设、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业尼金平免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
加上不同key值后,渐变效果有了:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./animate.css"> <script src="./vue.js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --> <style> .myfade-enter, .myfade-leave-to { opacity: 0; } .myfade-enter-active, .myfade-leave-active { transition: opacity 1s; } </style> </head> <body> <div id="root"> <transition name="myfade"> <div v-if="show" key="hello">hello</div> <div v-else key="bye">bye</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>
如果想设置多个属性之间的切换效果,可以用mode(mode="in-out":先显示要显示的再隐藏要隐藏的。mode="out-in":和前面的相反):
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./animate.css"> <script src="./vue.js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --> <style> .myfade-enter, .myfade-leave-to { opacity: 0; } .myfade-enter-active, .myfade-leave-active { transition: opacity 1s; } </style> </head> <body> <div id="root"> <transition name="myfade" mode="out-in"> <div v-if="show" key="hello">hello</div> <div v-else key="bye">bye</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>
组件动画也是可以的(不需要上面的不同值的key):
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./animate.css"> <script src="./vue.js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --> <style> .myfade-enter, .myfade-leave-to { opacity: 0; } .myfade-enter-active, .myfade-leave-active { transition: opacity 1s; } </style> </head> <body> <div id="root"> <transition name="myfade" mode="out-in"> <child1 v-if="show">hello</child1> <child2 v-else>bye</child2> </transition> <button @click="handleClick">切换</button> </div> <script type="text/javascript"> Vue.component("child1", { template: "<div>child1</div>" }); Vue.component("child2", { template: "<div>child2</div>" }); var vm = new Vue({ el: "#root", data: { show: true }, methods: { handleClick: function() { this.show = !this.show } } }); </script> </body> </html>
动态组件的实现方法:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./animate.css"> <script src="./vue.js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --> <style> .myfade-enter, .myfade-leave-to { opacity: 0; } .myfade-enter-active, .myfade-leave-active { transition: opacity 1s; } </style> </head> <body> <div id="root"> <transition name="myfade" mode="out-in"> //通过动态组件的方式实现: <component :is="type"></component> </transition> <button @click="handleClick">切换</button> </div> <script type="text/javascript"> Vue.component("child1", { template: "<div>child1</div>" }); Vue.component("child2", { template: "<div>child2</div>" }); var vm = new Vue({ el: "#root", data: { type: "child1" }, methods: { handleClick: function() { this.type = this.type == "child1" ? "child2" : "child1" } } }); </script> </body> </html>
网站名称:Vue中多个元素或组件的过渡
网页路径:https://www.cdcxhl.com/article22/jchocc.html
成都网站建设公司_创新互联,为您提供全网营销推广、品牌网站设计、关键词优化、网页设计公司、移动网站建设、定制开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联