vue的过渡动画

Posted 2021-03-07 lijianming180

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的过渡动画相关的知识，希望对你有一定的参考价值。

在 vue 中往往需要添加动画,但是并不像 JQ 一样可以比较容易的添加,经常我会避免使用动画,这样就不用考虑了,但是在类似轮播图中,还是需要动画效果

动画样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.slider-enter-active {
  transform: translateX(0);
  transition: all 1s ease;
}
.slider-leave-active {
   大专栏  vue的过渡动画transform: translateX(-100%);
  transition: all 1s ease;
}
.slider-enter {
  transform: translateX(100%);
}
.slider-leave {
  transform: translateX(0);
}

定义

.slider-enter-active 和.slider-enter 是相关的,enter 定义了动画开始的状态,而 enter-active 在元素被插入时生效,动画结束后移除,定义了动画过度的状态,时间和运动曲线
同样的 leave 和 leave-active,只不过是动画结束时的定义

隐藏的 boss

还有一个.slider-enter-to(leave 也有相同的),是在元素被插入后一帧生效,同时 slider-enter 将被删除,定义了过度结束后的状态,在动画结束后被移除

效果

图片进入时从 translateX 轴-100%的地方进入,到 0%的时候停止,用时 1 秒
图片消失的时候从 0%的位置移动到-100%消失,用时 1 秒

绑定

用 transition-group 来包裹多个元素,用 transition 来包裹一个,并用 name 来命名,需要 name 后的名字和 css 样式中的统一

name=”slider”,那么 css 中就要 .slider-leave 需要统一

以上是关于vue的过渡动画的主要内容，如果未能解决你的问题，请参考以下文章

片段中的某些视图未使用过渡动画

Vue显示和隐藏的过渡动画

vue列表逐个进入过渡动画

java 将循环显示和不显示过渡动画添加到Android片段

Vue之过渡动画

Vue过渡动画