动画

基础

被 transition 标签包裹的带有 v-if 、 v-show 、:is 的子标签可以具有动画效果

属性 name

• 作用：定义 className 的前缀
• 如果没有定义 name 属性，则使用默认前缀 v-

显示的 className

• v-enter：动画刚开始的第一帧添加，第二帧清除，可以 定义显示前的状态
• v-enter-to：动画第二帧添加，结束时清除，可以 定义显示后的状态
• v-enter-active：动画第一帧添加，结束时清除，可以 定义过渡(transition)和不变的状态


例子：渐显

1. transition

.v-enter {
	opacity: 0;
}
.v-enter-to {
	opacity: 1;
}
.v-enter-active {
	transition: all 1s ease-in-out;
}

2. @keyframes + animation

@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.v-enter-active {
	animation: fade 1s ease-in-out;
}

隐藏的 className

• v-leave：动画刚开始的第一帧添加，第二帧清除，可以 定义隐藏前的状态
• v-leave-to：动画第二帧添加，结束时清除，可以 定义隐藏后的状态
• v-leave-active：动画第一帧添加，结束时清除，可以 定义过渡(transition)和不变的状态


例子：渐隐

1. transition

.v-leave {
	opacity: 1;
}
.v-leave-to {
	opacity: 0;
}
.v-leave-active {
	transition: all 1s ease-in-out;
}

2. @keyframes + animation

@keyframes fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.v-leave-active {
	animation: fade 1s ease-in-out;
}

自定义className

• 添加属性

<!-- 想修改哪个就添加哪个 -->
<transition 
    enter-class="enter"
    enter-to-class="enter-to"
    enter-active-class="enter-active"
></transition>
<!-- leave 同理 -->

刚进入页面是也有动画效果

• 添加属性

<transition 
    appear 
    appear-class="自定义" 
    appear-to-class="自定义" 
    appear-active-class="自定义"
></transition>

通过 js 控制动画

• 添加自定义事件

<transition
    @before-enter="handleBeforeEnter" 
    @enter="handleEnter"  
    @after-enter="handleAfterEnter" 
></transition>

methods: {
    // el：transition包裹的子dom（最外层）
	handleBeforeEnter(el) {
        // 在显示的第一帧执行
    }, 
    handleEnter(el, done) {
        // 在显示的第二帧执行
    },
    handleAfterEnter(el) {
        // 在 handleEnter 调用完 done 后执行
    }
}

• leave同理

多个元素或组件的切换的问题

1、通过添加 mode 属性解决多组件同时显示隐藏的问题

• 先隐藏后显示：out-in
• 先显示后隐藏：in-out

<transition mode="out-in"></transition>

---

2、通过 v-if / v-else 切换时，要加上 key ，不然会渲染成同一个 dom，就没有动画效果了

<transition mode="out-in">
	<div v-if="show" key="hello">hello</div>
    <div v-if="show" key="bye">bye</div>
</transition>

列表过渡

使用 transition-group 包裹

<transition-group>
	<div v-for="item of list" :key="item"> {{ item }} </div>
</transition-group>

• css 代码依旧如此

.v-enter {
	opacity: 0;
}
.v-enter-to {
	opacity: 1;
}
.v-enter-active {
	transition: all 1s ease-in-out;
}