Vue笔记13-Vue Transition组件

meowrain 收录于前端 - Vue

2024-05-18 约 200 字预计阅读 1 分钟

注意

本文最后更新于 2024-05-18，文中内容可能已过时。

官方文档： https://cn.vuejs.org/guide/built-ins/transition.html

使用v-if处理盒子显示和消失

🤓 看上去很生硬，不是吗？我们来用transition组件处理一下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


<template>
  <div>
    <el-button color="#626aef" @click="flag = !flag"> 切换组件</el-button>
    <Transition name="fade">
      <div class="box" v-if="flag">box</div>
    </Transition>
  </div>
</template>
<script setup lang="ts">
import { ref, Transition } from 'vue'

let flag = ref<boolean>(true)
</script>
<style scoped>
.box {
  background-color: aqua;
  width: 200px;
  height: 200px;
}

.fade-enter-from,
.fade-leave-to {
  width: 0;
  height: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}
.fade-enter-to,
.faode-leave-from {
  background-color: aqua;
  width: 200px;
  height: 200px;
}
</style>

Vue笔记13-Vue Transition组件

相关内容