当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue-router过渡动画

vue-router过渡动画

2020年07月07日  | 移动技术网IT编程  | 我要评论

1、代码示例

（1）在标签的外部添加标签，标签还需要一个name属性，代码如下：

<transition name="fade" mode="out-in">
    <router-view />
</transition>
（2）加入CSS

，一共4个CSS类名，四个类名与transition的name属性有关，比如name=”fade”，相应的css如下：

/*页面切换动画*/
/*进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除*/
.fade-enter-active {
    transition: opacity .5s;
}
/*进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除*/
.fade-enter {
    opacity: 0;
}
/*离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除*/
.fade-leave {
    opacity: 1;
}
/*离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除*/
.fade-leave-active {
    opacity:0;
    transition: opacity .5s;
}

2、过渡模式mode

in-out：新元素先进入过渡，完成之后当前元素过渡离开，默认模式。
out-in：当前元素先进行过渡离开，离开完成后新元素过渡进入。

本文地址：https://blog.csdn.net/AyayaOVO/article/details/107145477

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网