添加全局过渡动画

219 阅读1分钟

transition组件

在admin.vue中添加

用transition组件 之中的组件要有一个根节点(div) 两个就失效了

如果一个根节点 还是有问题

/* 进入之前 */
.fade-enter-from{
    opacity: 0;
}
/* 进入之后 */
.fade-enter-to{
    opacity: 1;
}
/* 离开之前 */
.fade-leave-from{
    opacity: 1;
}
/* 离开之后 */
.fade-leave-to{
    opacity: 0;
}

/* 过渡时间 */
.fade-enter-active,
.fade-leave-active{
    transition: all 0.3s;
}
.fade-enter-active{
    transition-delay: 0.3s;
}

给进入动画推迟一下

也可以使用开源的库

Animate.css