vue基础 过渡、动画效果

准备工作：基础结构

<template>
    <div>
         <button @click="show = !show">
                Toggle render
         </button>
         <!-- <transition name="slide-fade">
                <p v-if="show">hello</p>
         </transition> -->
         <transition name="slide-fade">
                <p v-if="show">hello</p>
         </transition>
    </div>
</template>

<script>
export default {
    name:'Animates',
    data() {
        return {
            show:true
        }
    },
}
</script>

1.vue基础动画效果

.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;
}

2.自定义动画效果

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

 可以根据以上六状态在定义css样式：（自定义如下）

<style scoped>
.slide-fade-enter,
.slide-fade-leave-to{
    opacity: 0;
}
.slide-fade-enter-to,
.slide-fade-leave{
    opacity: 1;
}


.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 4s ease;
}
</style>

3.根据动画库定义动画

首先将

    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

  引入index.html

<template>
    <div>
         <button @click="show = !show">
                Toggle render
         </button>
         <!-- <transition name="slide-fade">
                <p v-if="show">hello</p>
         </transition> -->
         <transition 
         name="custom-classes-transition"   //不要更改
         enter-active-class="animated  flipInY"  //进入时候的动画，tada是根据自己想要的效果定的
         leave-active-class="animated flipOutX">  //离开是的动画效果过，bounceOutRight同理
                <p v-if="show">hello</p>
         </transition>
    </div>
</template>
注：动画效果可以看https://www.swiper.com.cn/usage/animate/index.html 选择自己要的效果