vue过渡的类名笔记

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 被删除)，在过渡/动画完成之后移除。

例子：css

 <style>.v-enter,.v-leave-to{opacity:0;transform:translateX(80px);}     .v-enter-active,.v-leave-active{transition: all 3.8s ease;}</style>

html

<div id="app"><input type="button" value="切换" @click="flag=!flag"><!--需求，点击按钮，让h3显示，再点击，隐藏--><!--1.使用 transition 元素，把 需要被动画控制的元素包裹起来--><transition><h3 v-if="flag">这个是一个H3</h3></transition></div>

js

var vm = new Vue({el:"#app",data:{flag:false},methods:{}})

vue过渡的类名笔记相关推荐

Vue.js 框架基础笔记
Vue.js 框架基础笔记 1. Vue.js 基本概念 1.1 遇见 Vue.js 1.1.1 为什么要学习 Vue.js 1.1.2 前端开发的复杂化 1.1.3 Vue.js 特点 1.1.4 ...
Vue 过渡组件，可实现组件或者页面的动画过渡或者css过渡
使用过渡效果,可以优化用户体验,Vue给我们封装了一个很好用的组件,专门用来处理过渡效果,下面我们来看看怎么使用它: Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组 ...
Vue 过渡实现轮播图
Vue 过渡实现轮播图 Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过 ...
通过示例了解Vue过渡和动画
作者:Matt Maribojoc 译者:前端小智来源:stackabuse 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://githu ...
vue过渡动画Animate.css动画库(1)
一.前言: 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验, Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画 ...
Vue 学习第六天学习笔记
Vue 学习第六天学习笔记 1.webpack 使用复习第一步:先建立文件夹. 第二步,用webpack将其初始化,建立管理.npm 的包管理工具管理起来, npm init -y .注意{查 ...
Vue过渡动画混入
目录过渡自定义过渡的类名同时使用过渡和动画显性的过渡持续时间
[vue] vue过渡动画实现的方式有哪些？
[vue] vue过渡动画实现的方式有哪些? 1.使用vue的transition标签结合css样式完成动画 2.利用animate.css结合transition实现动画 3.利用 vue中的钩子函 ...
Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...

vue过渡的类名笔记

vue过渡的类名笔记

例子：css

html

js

vue过渡的类名笔记相关推荐

最新文章

热门文章