首页 > 代码库 > 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动画