vue3以动画形式显示隐藏内容
时间: 2024-10-13 17:16:52 浏览: 4
Vue3 中可以使用 Vue 的内置动画库,如 `@vue/cli-plugin-vuex` 中的 `v-enter`, `v-enter-to`, `v-leave-to` 等指令,或者第三方库如 `vue-animate` 或者 `vue-transition-group` 来创建动画效果来显示或隐藏内容。
当你想以动画形式切换元素的可见状态时,可以这样做:
1. 安装插件:首先需要安装所需的动画插件,例如:
```bash
npm install vue-transition-group
```
2. 在组件模板中使用 `<transition>` 组件:
```html
<template>
<div>
<transition name="fade">
<slot v-if="shouldShow" @after-enter="onEnter" @after-leave="onLeave"></slot>
</transition>
</div>
</template>
<script>
import { Transition } from 'vue-transition-group';
export default {
components: {
Transition,
},
data() {
return {
shouldShow: false,
};
},
methods: {
onEnter() {
// 进入动画完成后的回调,这里可以添加一些额外操作
},
onLeave() {
// 隐藏动画完成后的回调
},
},
// 动画名称,例如 "fade":
computed: {
getTransitionName() {
return this.shouldShow ? 'fadeIn' : 'fadeOut';
},
},
};
</script>
```
在这个例子中,当 `shouldShow` 为真时,`<slot>` 将显示并执行名为 "fadeIn" 的进入动画;相反,如果 `shouldShow` 为假,则执行名为 "fadeOut" 的离开动画。记得自定义适合你需求的动画效果。
阅读全文