vue transition 动画

vue transition 动画

自定义两组样式，来控制transition 内部的元素实现动画

/* 
`v-enter` [这是一个时间点]，
是进入之前，元素的起始状态，此时还没有开始进入 */
/*  
`v-leave-to` [这是一个时间点]，
是动画离开之后，离开的终止状态，此时，元素动画已经结果 */
.v-enter,.v-leave-to {
    opacity: 0;
    transform: translateX(150px);
}

/*
    v-enter-active [入场动画时间段]
    v-leave-active [离场动画的时间段]
*/
.v-enter-active,
.v-leave-active {
    transition: all .4s ease;
}

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <transition>
        <h3 v-if="flag">这是一个h3</h3>
    </transition>
</div>

钩子函数实现半场动画

<div id="app">
    <input type="button" value="加入购物车" @click="flag=!flag"/>
    <transition @before-enter="beforeEnter" 
    @enter="enter" @after-enter="afterEnter">
        <div class="ball" v-show="flag"></div>
    </transition>
</div>

.ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: skyblue;
}

var vm = new Vue({
    el: '#app',
    data() {
        return {
            flag: false
        }
    },
    methods: {
        // 注意：动画钩子函数的第一个参数，el表示执行动画的那个DOM元素，是个原生的JS DOM 对象
        // 大家可以认为，el是通过document.getElementById('')方式获取得到原生JS DOM 对象
        beforeEnter(el) {
            // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以在beforeEnter 中，设置元素开始动画之前的起始样式
            // 设置小球开始动画之前的，起始位置
            el.style.transform = "translate(0,0)"
        },
        enter(el) {
               // 这句话没有实际的作用，但是，如果不写，出不来动效
            // 可以认为e.offsetWidth 会强制动画刷新
            el.offsetWidth
            // 表示动画开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
             el.style.transform = "translate(150px,450px)"
             el.style.transition = 'all 1s ease'
        },
        afterEnter(el) {
             // 动画完成之后，会调用afterEnter
            this.flag = !this.flag
        }
    }
})