Vue-router 过渡动画

作者: Rising_life | 来源:发表于2019-07-12 16:52 被阅读9次

想让路由有过渡动画,需要在<router-view>标签的外部添加<transition>标签,标签还需要一个name属性。

在/src/App.vue文件里添加了<transition>标签,并给标签起了一个名字叫fade。

css过渡类名

 组件过渡过程中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,比如name=”fade”,会有如下四个CSS类名:

fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。

fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。

fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。

fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。

从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。

在App.vue页面里加入四种CSS样式效果,并利用CSS3的transition属性控制动画的具体效果。

设置改变透明度的动画过渡效果:

过渡模式 mode属性: 

给 <transition>标签 添加 mode属性

in-out:新元素先进入过渡,完成之后当前元素过渡离开。

out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。

相关文章

  • Vue-router 过渡动画

    想让路由有过渡动画,需要在标签的外部添加 标签,标签还需要一个name属性。 在/src...

  • JS中的动画事件和过渡事件

    动画事件 动画事件demo 过渡动画事件 过渡动画事件demo

  • CSS3过渡动画

    过渡动画 transition属性简介transition是网页上的过渡动画,变化的逐渐过渡效果,简称过渡动画!列...

  • 过渡与动画

    @(HTML5)[过渡, 动画] [TOC] 五、过渡与动画 过渡 transition-property:过渡属...

  • 动画core animation

    type 动画过渡类型subtype 动画过渡方向

  • Android过渡动画Scene and Transition(

    Android场景过渡——Scene and Transition(一) 场景过渡动画 场景过渡动画是指以动画的形...

  • 016 过渡及动画

    过渡与动画 一、过渡 1、过渡属性 二、动画 1、动画属性 2、动画体 v_hint:动画属性设置给指定选择器标签...

  • CSS3--动画

    特点 过渡和动画之间的相同点过渡和动画都是用来给元素添加动画的过渡和动画都是系统新增的一些属性过渡和动画都需要满足...

  • CSS3动画

    css3动画包括过渡,形变,动画 过渡transition: 指定过渡样式:transition-property...

  • web前端-CSS3动画

    动画和过渡的异同 相同点过渡和动画都是给元素添加动画的过渡和动画都是CSS3新增的属性过渡和动画都需要满足三要素才...

网友评论

    本文标题:Vue-router 过渡动画

    本文链接:https://www.haomeiwen.com/subject/amprkctx.html