vue3中的Transition的基本使用及注意事项

注意事项： 不能在当前的标签上添加条件判断，可在下一级的标签上添加

• 基本使用

<Transition name="fade">
    <div v-if="showModel" class="model-wrap flexc flexcc flexjc" @click="hideModel">
        <div class="model-box">
            <slot></slot>
        </div>
    </div>
</Transition>

• 动画的样式，默认是v-enter-from等，当你在标签上用name相当于是起了一个别名，就用fade-enter-from
• 基本的动画

.fade-enter-active,
.fade-leave-active {
    opacity: 1;
    transition: all 0.5s ease-out;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

• 上面的样式，只会让我整体的进行动画，但是我中间的内容，想要一个不同的动画效果，可以使用深层级过度，就是在动画的样式后跟上我们当前要使用动画的标签的class名

.fade-enter-active .model-box,
.fade-leave-active .model-box {
    transform: scale(1);
    transition: all 0.5s ease-out;
}
.fade-enter-from .model-box,
.fade-leave-to .model-box {
    transform: scale(0);
}

• 这样的话，就会有两种不一样的动画效果了
• 也可以搭配使用动画库的css样式，这个就需要你去官网查看下了https://cn.vuejs.org/guide/built-ins/transition.html#css-based-transitions
• 基本就介绍到这里啦，想要了解更多，还是到官网查看更好一点