Vue中的transition动画 渐隐渐显

transition组件用给进入或者离开的元素或者组件添加样式
语法：
1.需要动画的元素用组件包裹起来

2.给改元素添加v-if

3.设置样式

vue提供给我们六个类，来设置我们元素的显示和隐藏

如果不设置name属性 那么名用v来代替 期中 进入前和离开后的状态是一样的 进入后和离开前的状态是一样的

.名-enter 进入前

.名-enter-to 进入后

.名-leave 离开前

.名-leave-to 离开后

.名-enter-acitve,.名-leave-active{

​ 进入或者离开的过程

}

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 lc-enter。

案例展示：

<template>
  <div>
    <transition name="lc">
      <p v-if="flag">我想带你去看晴空万里</p>
    </transition>
    <button @click="flag = !flag">点我</button>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      flag: false,
    };
  },
};
</script>
<style lang="scss" scoped>
    .lc-enter,.lc-leave-to{//进入前，离开后
        opacity: 0;
    }
    .lc-enter-to,.lc-leave{//进入后，离开前
        opacity: 1;
    }
    .lc-enter-active,.lc-leave-active{
        transition: all 3s;
    }
</style>