transition组件：控制V-if与V-show的显示与隐藏动画

1.基本使用 

 

<template><div><button @click="falg = !falg">切换</button><transition name="fade" :enter-to-class="etc"><div v-if="falg" class="box ">box1</div><div v-else class="box2">box2</div></transition></div>
</template>

javascript"><script>
const falg = ref(true)
</script>

 样式动画

<style scoped>
.box {width: 200px;height: 200px;text-align: center;background-color: red;line-height: 200px;}.box2 {text-align: center;line-height: 200px;width: 200px;height: 200px;color: white;background-color: black;
}
/* 插入的新元素初始的样式 */
.fade-enter-from {width: 0;height: 0;color: white;
}.fade-enter-active,
.fade-leave-active {transition: all 5s ease;
}/* 出入的新的元素的结束的样式 */
.fade-enter-to {width: 200px;height: 200px;transform: translateY(-200px);/* background: black; */
}
/* 移除旧元素的结束的样式 */
.fade-leave-to {width: 200px;height: 200px;background: white;
}
</style>

2.appear属性

在进入页面时就会触发enter-from到enter-to的动画

<template><div><button @click="falg = !falg">切换</button><transition appear name="fade" :enter-to-class="etc"><div v-if="falg" class="box ">box1</div><div v-else class="box2">box2</div></transition></div>
</template>

3.小案例-按钮切换滚动

<script setup>
import { ref } from 'vue'const docState = ref('saved')
</script><template><span style="margin-right: 20px">Click to cycle through states:</span><div class="btn-container"><Transition name="slide-up"><button v-if="docState === 'saved'"@click="docState = 'edited'">Edit</button><button v-else-if="docState === 'edited'"@click="docState = 'editing'">Save</button><button v-else-if="docState === 'editing'"@click="docState = 'saved'">Cancel</button></Transition></div>
</template><style>
.btn-container {display: inline-block;position: relative;height: 1em;
}button {position: absolute;
}.slide-up-enter-active,
.slide-up-leave-active {transition: all 0.25s ease-out;
}.slide-up-enter-from {opacity: 0;transform: translateY(30px);
}.slide-up-leave-to {opacity: 0;transform: translateY(-30px);
}
</style>

4.配合animate.css动画库使用

4.1下载安装animate依赖包

npm install animate.css -S

javascript">yarn add animate.css -S

 

 4.2在使用的组件中导入

javascript">import 'animate.css';

 4.3结合transition使用animate动画库

<script setup>
import 'animate.css';
const falg = ref(true)
</script>
<template><div style="margin-top: 500px;"><button @click="falg = !falg">切换</button><transition name="fade" :enter-to-class="etc"><h1 v-if="falg"><div class="box animate__animated animate__bounce">你好</div></h1><h1 v-else><div class="box2 animate__animated animate__fadeInLeft">你好</div></h1></transition></div><div class="box2 animate__animated animate__hinge">你好</div>
</template>
<style scoped>
.box {width: 200px;height: 200px;text-align: center;background-color: red;line-height: 200px;}.box2 {text-align: center;line-height: 200px;width: 200px;height: 200px;color: white;background-color: black;
}</style>