过渡模式和前端过渡动画修改[B君笔记][博客]

noscript{position: fixed}过渡模式和前端过渡动画修改vue创建时间：2021-12-25 01:56:53

旧

旧页面动画

放慢的旧动画
上图为减速后的效果。很明显，在文章页面退出动画和文章列表进入动画同时发生，并且此时文章页面是有高度的。结果就是，列表页面先从页面中部右滑进入，直到文章页面完全退出时跳到顶部。会有一个页面抖动的过程。这个过程虽然很短，但还是能被人眼发觉的。

性能

跑下性能，果然，有一个布局偏移发生在动画之外。这就是发生页面抖动的桢。
旧页面动画性能

原本的思路

以下为伪代码，为了控制每个页面的动画，我把过渡动画的类都写在模板里。

<templage>
 <transition enter-active-class="animate__slideInLeft animate__faster" leave-active-class="animate__slideOutLeft animate__faster">
 <div class="article_lit animate__animated  "></div>
</transition>

</templage>
<templage>
  <transition  enter-active-class="animate__zoomInRight animate__faster"  leave-active-class="animate__zoomOutRight animate__faster" >
 <div class="article_one animate__animated  "></div>
</transition>
</templage>

摸索

官方文档中有个例子过渡模式，几乎是一致的
过渡模式抖动
其解决方法是绝对定位，之后再添加过渡模式。尝试修改过了，确实也可以解决。

Vue 提供过渡模式

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

不过我还在在另外的文档中我发现基于路由的动态过渡，其原理是基于路由修改动画名称，也就是说可以在把控制页面动画放在路由守卫中咯。

新

效果

新动画效果

思路

transition 设置过渡模式out-in
在路由的meta中定义动画
在路由守卫中按组件名称修改动画。

代码

<transition :enter-active-class="transitionInName" :leave-active-class="transitionOutName" mode="out-in">
	<router-view :key="key" />
</transition>



//路由name和meta
"name": "article-list",
"meta": {
  transition:{
    in:'animate__slideInLeft',
    out:'animate__slideOutLeft',
  },
}

// 守卫
  beforeRouteUpdate (to, from, next) {
    if(typeof to['meta']['transition']['in'] !="undefined"){
      this.transitionInName = to['meta']['transition']['in'] + ' animate__animated animate__faster'
    }
    if(typeof from['meta']['transition']['out'] !="undefined") {
      this.transitionOutName = from['meta']['transition']['out'] + ' animate__animated animate__faster'
    }
    next()
  }