Vue3第十章（transtion基础组件使用）

山人不爱喝酒

已于 2022-10-17 09:35:54 修改

阅读量281

点赞数

分类专栏： vue3 文章标签： javascript

于 2022-10-17 09:35:18 首次发布

本文链接：https://blog.csdn.net/weixin_42185448/article/details/127357406

版权

vue3 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js中利用transition组件创建动画效果。通过设置name属性，如`fade`，并定义对应的进入和离开样式，如`.fade-enter-from`、`.fade-enter-active`等，可以实现元素的淡入淡出效果。示例代码展示了一个按钮切换显示红色方块的场景，详细说明了样式和Vue的transition结合使用的步骤。

摘要由CSDN通过智能技术生成

在transition组件上使用name属性，然后写对应动画的样式即可
例如：
name=“fade”
进入样式为：
fade-enter-from
fade-enter-active
fade-enter-to
离开样式为：
fade-leave-from
fade-leave-active
fade-leave-to

<template>
  <div class="content">
    <button @click="flag = !flag">switch</button>
    <transition name="fade">
      <div v-if="flag" class="box"></div>
    </transition>
  </div>  
</template>
<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)

const flag = ref<boolean>(false)
</script>
<style scoped>
.content{
  width:600px;
  height:600px;
}
.box{
  width:200px;
  height:200px;
  background-color: red;
}
.fade-enter-from{
  width:0;
  height:0;
  transform: rotate(360deg);
}
.fade-enter-active{
  transition: all 1s ease;
}
.fade-enter-to{
  width:200px;
  height:200px;
}
.fade-leave-from{
  width:200px;
  height:200px;
  transform: rotate(360deg);
}
.fade-leave-active{
  transition: all 5s ease;
}
.fade-leave-to{
  width:0;
  height:0;
}
</style>