vue.js trasition动画效果,vue.js动画
================================
©Copyright 蕃薯耀 2018年12月07日
http://fanshuyao.iteye.com/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue.js trasition动画效果</title> <style type="text/css"> /*xxx-enter-active, xxx-leave-active*/ .myFade-enter-active, .myFade-leave-active { transition: opacity 1s; } .myFade-enter, .myFade-leave-to /* .myFade-leave-active below version 2.1.8 */ { opacity: 0; } /* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-to /* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateX(10px); opacity: 0; } </style> </head> <body> <div id="vueDiv"> <div style="margin-top: 30px;"> <div v-show="isShow">这是内容显示或者隐藏的动画效果。</div> <input type="button" value="隐藏/显示" @click="isShow=!isShow"/> </div> <div style="margin-top: 30px;"> <div>-----这里加上动画效果-----</div> <div style="margin-top: 15px;"> <transition name="myFade"> <div v-show="isShowTransition">淡入浅出动画效果。</div> </transition> <input type="button" value="隐藏/显示" @click="isShowTransition = !isShowTransition"/> </div> </div> <div style="margin-top: 30px;"> <div>-----这里加上动画效果2-----</div> <div style="margin-top: 15px;"> <transition name="slide-fade"> <div v-show="isSideFade">淡入浅出动画效果2。</div> </transition> <input type="button" value="隐藏/显示" @click="isSideFade = !isSideFade"/> </div> </div> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> var vueObj = new Vue({ el : "#vueDiv", data : { isShow : true, isShowTransition : true, isSideFade : true } }); </script> </body> </html>
================================
©Copyright 蕃薯耀 2018年12月07日
http://fanshuyao.iteye.com/