在Vue中，如何使用CSS过渡和动画？

在 Vue 中，使用<transition>组件来实现 CSS 过渡动画，这个组件可以包装任何需要过渡到其他状态的元素，例如添加、删除或更新元素。下面是一个简单的例子，展示了如何使用<transition>组件实现一个元素的过渡动画效果：

<template>
  <div>
     <button @click="show =!show">Toggle</button>
     <transition name="fade" v-if="show">
        <div>Fade In / Fade Out</div>
     </transition>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      show: false
    };
  }
};
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
    
  transition: opacity 0.5s ease;
}

.fade-enter, .fade-leave-to {
    
  opacity: 0;
}
</style>

上述代码中，当点击Toggle按钮时，会切换show变量的值，从而控制<div>元素的显示与隐藏。同时，<transition>组件会根据show变量的值来应用相应的过渡效果。

在<style>部分，定义了两个 CSS 类.fade-enter-active和.fade-leave-active，用于设置过渡的持续时间和效果。.fade-enter和.fade-leave-to类则分别定义了元素在进入和离开时的初始状态。这样，当元素显示或隐藏时，会有一个淡入淡出的过渡效果。