码迷,mamicode.com
首页 > 其他好文 > 详细

vue动画

时间:2017-06-06 11:55:15      阅读:757      评论:0      收藏:0      [点我收藏+]

标签:属性   city   vue   transform   nbsp   nim   logs   ade   animate   

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动画

标签:属性   city   vue   transform   nbsp   nim   logs   ade   animate   

原文地址:http://www.cnblogs.com/haonanZhang/p/6950676.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!