vue中过渡动画（类名实现方式）

vue中过渡动画分为两类，一类是进场动画，一类是出场动画
要实现上面的进场动画，主要有三种方式：类名，css动画库，js函数

类名本质就是动态添加类名实现动画

在进入/离开的过渡中，会有 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标签包裹起来，并给它指定一个name属性，这个name属性将来会替换掉类名的v-前缀
定义上面6个类名里面的类容，注意类名v-前缀要换成name的值，关键要分清楚开始和结束的状态样式

<style>
.move-enter {padding-left: 100px;
}
.move-enter-active {transition: all 6s;
}
.move-enter-to {padding-left: 0;
}.move-leave {padding-left: 0;
}
.move-leave-active {transition: all 6s;
}
.move-leave-to {padding-left: 100px;
}
</style>
<body><div id="app"><transition name="move"><div v-if="isShow">显示</div></transition><button @click="isShow = !isShow">切换</button></div>
<script>var vm = new Vue({el: '#app',data: {isShow: false}})</script>
</body>

注意点：

在标签同名的情况下，vue为了提高效率，会直接替换掉标签中的内容。为了解决这个问题，给每个标签加一个key属性，但这个key必须不一样
当transition下面有两个标签要切换的时候，会出现同时在动的情况，解决方式给transition加一个mode属性
如果想要动画一进来就有，那么就给transition加要给appear属性

<transition name="move" mode="out-in" appear><div v-if="isShow" key="one">显示</div><div v-else key="two">隐藏</div>
</transition>
<button @click="isShow = !isShow">切换</button>

转载于:https://www.cnblogs.com/mushitianya/p/10511896.html

vue中过渡动画（类名实现方式）相关推荐

React中过渡动画的编写方式
文章目录 React的过渡动画过渡动画库的介绍 CSSTransition(掌握) SwitchTransition(了解) TransitionGroup(了解) React的过渡动画过渡动画库 ...
[vue] vue过渡动画实现的方式有哪些？
[vue] vue过渡动画实现的方式有哪些? 1.使用vue的transition标签结合css样式完成动画 2.利用animate.css结合transition实现动画 3.利用 vue中的钩子函 ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...
vue 文件转换二进制_在vue中使用axios实现post方式获取二进制流下载文件(实例代码)...
需求点击导出下载表格对应的excel文件在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现第一步,在 axios 请求中加入参数,表示接收的数据为二进 ...
Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
vue中实现动画效果--三种方式
一.普通动画实现效果用一个按钮, 控制一个 div 的淡入和淡出步骤使用 js 控制 div 的 class name 点击 function anime() {var boxDom = do ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
【Vue】Vue的过渡动画
目录一.过渡动画二.transition组件三.transition的显示的CSS类名四.transition的隐藏的CSS类名五.互斥动画示例: 六.设置动画过程中的监听回调七.列表过 ...
vue的过渡动画（有vue的动画库和ui库的介绍）
一.概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 二.默认过渡 <template><div><button @click=" ...

vue中过渡动画（类名实现方式）

类名本质就是动态添加类名实现动画

思路：

注意点：

vue中过渡动画（类名实现方式）相关推荐

最新文章

热门文章

vue中过渡动画（类名实现方式）

类名 本质就是动态添加类名实现动画

思路：

注意点：

vue中过渡动画（类名实现方式）相关推荐

最新文章

热门文章

类名本质就是动态添加类名实现动画