Vue 过渡动画标签 transition

Vue

梗概

在Vue中，可以使用过渡动画标签transition来为元素添加动画效果。transition标签可以包裹任意元素，并通过设置不同的属性来控制元素在进入或离开时的动画效果。这个特性使得页面交互更加生动和吸引人。

优势

1. 简单易用：只需在需要添加动画效果的元素外层包裹transition标签，并设置相应的属性即可。
2. 支持多种动画效果：Vue提供了多种过渡效果，如fade、slide、bounce等，可以根据实际需求选择合适的效果。
3. 可自定义：除了预设的过渡效果外，还可以自定义CSS样式来实现特定的动画效果。

使用方法

1. 在需要添加过渡动画的元素外层包裹transition标签：

<transition name="fade">
  <!-- Your content here -->
</transition>

2. 设置相应的属性：

• name：指定过渡效果的名称，在CSS中定义对应的样式。
• appear：是否在初始渲染时触发过渡，默认为false.
• css：是否使用CSS过渡，默认为true.
• type：指定过渡模式，如in-out、out-in等.

示例

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello, Vue!</p>
    </transition>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>
 
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在上面的示例中，点击按钮后会显示或隐藏文本“Hello, Vue!”，并带有过渡效果。