vue3中的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
  • 基本就介绍到这里啦,想要了解更多,还是到官网查看更好一点

你可能感兴趣的:(vue3中的Transition的基本使用及注意事项)