11,你听说过vue过渡动画了嘛?没有吧? 众里寻他千百度,百度不一定全面?
2020【前端VUE框架】最新最全实战课程,VUE56节分享,免费拿不谢!
vue过度动画的使用方法整理
vue.js css 脸书
发布于 2020-11-19
transition
props
- name: - string,用于自动生成 CSS 过渡类名。例如:name: ‘fade’ 将自动拓展为.fade-enter,.fade-enter-active等。默认类名为 “v”
- appear: - boolean,是否在初始渲染时使用过渡。默认为 false。
- css: - boolean,是否使用 CSS 过渡类。默认为 true。如果设置为 false,将只通过组件事件触发注册的 JavaScript 钩子。
- type: - string,指定过渡事件类型,侦听过渡何时结束。有效值为 “transition” 和 “animation”。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
- mode: - string,控制离开/进入的过渡时间序列。有效的模式有 “out-in” 和 “in-out”;默认同时生效。
- enter-class: - string
- leave-class: - string
- appear-class: - string
- enter-to-class: - string
- leave-to-class: - string
- appear-to-class: - string
- enter-active-class: - string
- leave-active-class: - string
- appear-active-class: - string
事件
- before-enter
- before-leave
- before-appear
- enter
- leave
- appear
- aftrt-enter
- after-leave
- after-appear
- enter-cancelled
- leave-cancelled(v-show有效)
- appear-cancelled
六个过度类名
简单地说就是 active 会伴随 enter/leave 的整个过程,v-enter 与 v-leave 存在的时长只都有 一帧 ,所以用肉眼看v-enter-to与v-enter-active几乎是同时出现,同时消失的。于是就会经常看到一些相同动画效果写法却不完全一样:(这也是我之前存在疑惑的地方)
1、
.fade-enter-active, .fade-leave-active {transition: opacity .5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
2、
.fade-enter-active, .fade-leave-active {transition: opacity .5s;
}
.fade-enter, .fade-leave-active {opacity: 0;
}
单组件过度
过度
<transition name="fade"><p v-if="show">hello</p></transition>.fade-enter-active, .fade-leave-active {transition: opacity .5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
动画
类似的只需要在过度类中填写动画即可
.fade-enter-active, .fade-leave-active {animation: fade-in .5s;
}
.fade-enter, .fade-leave-to {animation:fade-in .5s reverse;
}
@keyframes bounce-in {0% {ooacity: 0;}50% {ooacity: .5;}100% {ooacity: 1;}
}
自定义过度类名
vue还支持分别添加自定义过度类名,能够方便的配合第三方动画库
- enter-class
- enter-active-class
- enter-to-class (2.1.8+)
- leave-class
- leave-active-class
- leave-to-class (2.1.8+)
JavaScript钩子
<transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:after-enter="afterEnter"v-on:enter-cancelled="enterCancelled"v-on:before-leave="beforeLeave"v-on:leave="leave"v-on:after-leave="afterLeave"v-on:leave-cancelled="leaveCancelled"
><!-- ... -->
</transition>methods: {beforeEnter: function (el) {el.style.opacity = 0; //el:进行当前动作的dom元素},//当只用 JavaScript 过渡的时候, 在 enter 和 leave 中,回调函数 done 是必须的 。否则,它们会被同步调用,过渡会立即完成。enter: function (el, done) {// ...done()},afterEnter: function (el) {// ...},enterCancelled: function (el) {// ...},beforeLeave: function (el) {// ...},leave: function (el, done) {// ...done()},afterLeave: function (el) {// ...},// leaveCancelled 只用于 v-show 中leaveCancelled: function (el) {// ...}
}
列表过度
列表过度使用组件,并且需要绑定唯一的key
v-move特性
Vue 使用了一个叫 FLIP 简单的动画队列,使用 transforms 将元素从之前的位置平滑过渡新的位置。
*v-move是在过度开始时判断元素的位置是否发生改变,并且key是识别每个元素的关键。 在v-for中用index来绑定key值就不会虽然可行,但是不会触发v-move效果,因为不管数据怎么变数组下标还是没变。
*一定要在过度开始时就然元素的位置发生改变:v-enter或者v-leave或者active阶段,而v-leave-to 和v-enter-to不行
看下面一个demo,因为只是一组垂直排列的li所以position:absolute会腾出位置,之后的li会上移。
<transition-group name="slide" tag="ul" class="list-wrapper"><li class="list" v-for="(item, index) in content" :key="item.text"><span class="text">{{item.text}}</span></li></transition-group>.slide-move{ /*v-move*/trsnsition: all .5s;}.slide-leave-active{ /*未触发v-move效果*/transform: translate3d(-100%, 0, 0);}.slide-leave-active{ /*触发v-move效果,因为absolute所以在他之后的li都上移位置发生改变*/position: absolute;transform: translate3d(-100%, 0, 0);}slide-leave-to{ /*未触发v-move效果,过度开始时改变位置才有效*/position: absolute;transform: translate3d(-100%, 0, 0);}
学习目标:
提示:2021【前端VUE框架】最新/最全/最细实战课程,VUE56节进阶学习
重磅来袭:3个月掌握 vue 入门知识到实战学代码。
学习内容:
学习本节视频需要掌握的知识点:
1.HTML
2.CSS
3.JavaScript
那么关于上面三个知识点,视频学习地方在:html5+css3+js+jquery课程
加我微信,互撩vue前端
11,你听说过vue过渡动画了嘛?没有吧? 众里寻他千百度,百度不一定全面?相关推荐
- [vue] vue过渡动画实现的方式有哪些?
[vue] vue过渡动画实现的方式有哪些? 1.使用vue的transition标签结合css样式完成动画 2.利用animate.css结合transition实现动画 3.利用 vue中的钩子函 ...
- IOS手机侧滑返回与Vue过渡动画冲突
前端小白一个,最近做的一个Vue项目用到了Vue的过度动画,本来效果挺好的突然发现在IOS手机上项目本身使用的Vue过度动画与IOS侧滑发生冲突,出现了侧滑效果与Vue过度动画重复执行导致页面切换效果 ...
- Vue过渡 动画---vue工作笔记0014
然后我们来看vue中的过渡,以及动画效果. 上面这个toggle1,是可以实现点一下,慢慢的显示隐藏 第二个是,点一下,然后先放大,然后再缩小. vue实现动画效果的原理,实际上就是 1.可以看到就是 ...
- vue过渡动画Animate.css动画库(1)
一.前言: 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验, Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画 ...
- Vue过渡 动画混入
目录 过渡 自定义过渡的类名 同时使用过渡和动画 显性的过渡持续时间
- vue过渡动画之——过渡类名
过渡类名的使用 <transition name="fade"><div class="el"></div> </tr ...
- vue的过渡动画(有vue的动画库和ui库的介绍)
一.概念 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 二.默认过渡 <template><div><button @click=" ...
- 【猿说VUE】Vue效果法宝,过渡动画
基础:过渡动画 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Anim ...
- Vue 过渡组件,可实现组件或者页面的动画过渡或者css过渡
使用过渡效果,可以优化用户体验,Vue给我们封装了一个很好用的组件,专门用来处理过渡效果,下面我们来看看怎么使用它: Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组 ...
最新文章
- 奇瑞s61鸿蒙,数码提前曝光,奇瑞新能源 S61 将搭载华为鸿蒙车机系统
- 通过过滤器防止用户通过url访问不在权限内的菜单
- 数据库原理学习笔记(一)关系完整性以及数据库完整性
- 多设备同步表数据_利用Excel数据透视表解决两份报表数据不同步问题
- JAVA高并发的三种实现
- I/O操作不占用CPU的任何线程
- linux系统学习第六天
- Android各版本最新份额:果冻豆达62% 仍居首位
- 11个实用的Apache .htaccess配置
- HTTP API 设计指南
- 配置rsync同步+inotify实时监控
- Mac如何解决vi vim光标移动慢问题
- python编写生日代码_利用python-docx模块写批量生日邀请函
- 导线平差计算软件的NABCD分析
- html css手机端响应式登录页面
- pycharm2019版本去掉下划线的方法
- ROS基础学习笔记(五):自定义消息练习以及订阅者发布者节点代码简介
- NVIDIA RTX A6000深度学习训练基准
- springCloud-day04
- Future 模式详解(并发使用)