首页 > 代码库 > vue动画
vue动画
vue有自带动画这个属性:
在需要动画的元素外围包裹上标签,同时用name 属性表明动画的类型
<transition name="toggle-cart"> <div class="shopcart_detail " v-show="listShow"> </div> </transition> <transition name="fade"> <div class="list_masck animated fadeIn" v-show="listShow"></div> </transition>
css中动画的写法很简单
/** 动画 **/ .toggle-cart-enter-active, .toggle-cart-leave-active { transition: all .3s ease-out; } .toggle-cart-enter, .toggle-cart-leave-active { transform: translateY(100%); } .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-active { opacity: 0; }
vue动画
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。