vue动画transition

一、动画生命周期

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter
被移除)，在过渡/动画完成之后移除。

v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave
被删除)，在过渡/动画完成之后移除

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v-是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

v-enter-active 和v-leave-active 可以控制进入/离开过渡的不同的缓和曲线(ease ease-in ease-out liner)。

###二、应用场景-转场动画（淘宝、京东、拼多多）
图一、

图二、

图三、

代码：

 <transition :name="slideType"><keep-alive include="home"><router-view class="Router" /></keep-alive></transition>

<script>
export default {name: "App",data() {return {slideType: "slide-left",};},watch: {$route(to, from) {console.log(to);if (to.name == "Detail" && from.name == "home") {this.slideType = "slide-left";} else if (to.name == "home" && from.name == "Detail") {this.slideType = "slide-right";} else {this.slideType = "";}},}

<style>
.Router {position: absolute;left: 0;top: 0;width: 100%;
}
.slide-left-enter {transform: translateX(100%);opacity: 0;
}
.slide-left-enter-to {opacity: 1;
}
.slide-left-leave {opacity: 1;
}
.slide-left-leave-to {opacity: 0;transform: translateX(-100%);
}.slide-right-enter {opacity: 0;transform: translateX(-100%);
}
.slide-right-enter-to {opacity: 1;
}
.slide-right-leave {opacity: 1;
}
.slide-right-leave-to {opacity: 0;transform: translateX(100%);
}.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {transition: all 1s l;
}

vue动画transition相关推荐

vue动画transition（笔记）
笔记: 动画过程分为: 初始状态的思想重要 1:隐藏->显示 2:显示->隐藏
vue 动画（transition）
一. 实现原理在插入.更新.移除 DOM 元素时,在合适的时候给元素添加样式类名,配合 CSS 样式使用,实现动画效果. 通俗来讲,就是将要进行动画操作的 DOM 元素用 transition 标签 ...
vue中transition动画（移动端页面切换左右滑动效果）
例子一:(简单进入和离开动画) demo1 <template><div><button @click="isShow = !isShow">显 ...
【Vue】transition让你的v-if和v-show有个美美的过渡与动画
[Vue]transition让你的v-if和v-show有个美美的过渡与动画博客说明文章所涉及的部分资料来自互联网整理,当然还有自己个人的总结和看法,分享的目的在于共建社区和巩固自己.引用的资料 ...
css3 updown 动画,Vue的transition中的slidedown,slideUp展开收起动画
vue transition动画 vue的transition过渡动画在vue官网已有详细教程,就不赘述了.然而当我们使用transition来实现slidedown,slideup的展开收起动画时, ...
使用vue的transition完成滑动过渡
使用vue来做一些小巧的动画效果是非常方便的,今天本人想使用vue的transition来完成一个滑动过渡效果,这里和大家分享一下. 直接上源代码: <!DOCTYPE html> < ...
vue动画效果配置和弹层css sticky footer
vue动画效果配置有两种方式: 一种是css方式需要注意 4 个(CSS)类名在 enter/leave 的过渡中切换: v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移 ...
vue组件transition的使用（demo演示） - 教程篇
使用须知: 1. 简单介绍<transition> name ( - string ),用于自动生成 CSS 过渡类名. 例如: name: 'fade' 将自动拓展为.fade-ente ...
详解vue动画的封装
本文实例为大家分享了vue动画封装的具体代码,供大家参考,具体内容如下前端精品教程:百度网盘下载 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

vue动画transition

一、动画生命周期

vue动画transition相关推荐

最新文章

热门文章