详解vue中使用transition和animation的实例代码


Posted in Vue.js onDecember 12, 2020

以前写页面注重在功能上,对于transition和animation是只闻其声,不见其人,对于页面动画效果心理一直痒痒的。最近做活动页面,要求页面比较酷炫,终于有机会认真了解了。

transition:英文过渡的意思,作用是过渡效果;animation:英文活泼、生气、激励,动画片就是animation film,作用是动画效果。

transition在w3school的实例:

//将鼠标悬停在一个 div 元素上,逐步改变表格的宽度从 100px 到 300px:
div
{
 width:100px;
 transition: width 2s;
 -webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}

//transition 属性是一个简写属性,用于设置四个过渡属性:

//指定CSS属性的name,transition效果
transition-property
//transition效果需要指定多少秒或毫秒才能完成
transition-duration
//指定transition效果的转速曲线
transition-timing-function
//定义transition效果开始的时候
transition-delay

animation在w3school的实例:

//使用简写属性,将动画与 div 元素绑定
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
//animation 属性是一个简写属性,用于设置六个动画属性:
//规定需要绑定到选择器的 keyframe 名称。。
animation-name
//规定完成动画所花费的时间,以秒或毫秒计。
animation-duration
//规定动画的速度曲线。
animation-timing-function
//规定在动画开始之前的延迟。
animation-delay
//规定动画应该播放的次数。
animation-iteration-count
//规定是否应该轮流反向播放动画。
animation-direction

animation使用@keyframes规定动画

@keyframes animationname {
 keyframes-selector {
  css-styles;
 }
}
//必需。定义动画的名称。
animationname
//必需。动画时长的百分比。
//合法的值:
//0-100%
//from(与 0% 相同)
//to(与 100% 相同)
keyframes-selector
//必需。一个或多个合法的 CSS 样式属性。
css-styles

以上是transition和animation的基础知识,最项目使用vue这样主流框架,就用vue使用下transition和animation

1.第一步就是要安装依赖,只安装animation动画库,transiton是直接可以使用的标签,不用去下载依赖

npm install animate.css ?save

2.全局引用一下animation动画库

import animate from 'animate.css'
Vue.use(animate);

3.简单使用一下animation动画库,只要在class加上规定的动画效果名称就可以

<div class="rotateIn"
  style="animation-duration:2s;
   animation-delay:1s;
   animation-iteration-count:1;
   animation-fill-mode:both;">
</div>
<div class="fadeInLeft"
  style="opacity:0;
   animation-duration:3s;
   animation-delay:2s;
   animation-iteration-count:1;
   animation-fill-mode:both;">
</div>
<div class="fadeInUp"
  style="opacity:0;
   animation-duration:3s;
   animation-delay:3s;
   animation-iteration-count:1;
   animation-fill-mode:both;">
</div>

4.正式使用transiton和animation,把知识进阶一下,使用transition标签

1、使用基础的transiton和animation动画

/*v是默认的,在transition中定义name属性
 <transition name=fade>
 v-enter-from就要改成fade-enter-from
*/
<transition>
 <div>hello world</div>
 </transition>
 //使用transition标签时,直接在css中控制
 /*元素进入前效果*/
 .v-enter-from{
 opacity: 0;
 }
 /*元素进入时效果*/
 .v-enter-active{
 /*使用定义的动画*/
  animation: shake 0.3s;
 }
/*元素进入后效果*/
.v-enter-to{
  opacity: 1;
 }
/*元素离开前效果*/
 .v-leave-from{
  opacity: 1;
 }
/*元素离开时效果*/
 .v-leave-active{
/*使用定义的动画*/
  animation: shake 0.3s;
 }
 /*元素离开后效果*/
 .v-leave-to{
  opacity: 0;
 }
 /*定义一个动画效果*/
 @keyframes shake {
  0%{
   transform: translateX(-100px);
 }
  50%{
  transform: translateX(-50px);
 }
 0%{
   transform: translateX(50px);
 }
 }

2、使用trnasition标签的属性,结合animation的动画库

<transition
 transition :duration="{enter:1500,leave:600}"
 enter-from-class="animated"
 enter-active-class="animated"
 enter-to-class="animated"
 leave-from-class="animated fadeOut"
 leave-active-class="animated fadeOut"
 leave-to-class="animated fadeOut"
 v-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"
 mode="out-in" appear
>
/*enter-from-class就是v-enter-from元素进入前
 animated就是使用animation动画库,fadeOut就是动画效果
 */
 /*before-enter这些就是钩子函数,是滑动进入状态
 mode="out-in"是设定动画是先入后出,还是先出后入
 appear 是设置加载时就要开始动画
 */
// 进入中
//动画进入前
// --------
beforeEnter: function (el) {
 //el就是dom元素
 // ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
//动画进入时
enter: function (el, done) {
 // ...
 done()
},
//动画进入后
afterEnter: function (el) {
 // ...
},
//动画进入完成
enterCancelled: function (el) {
 // ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
 // ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
 // ...
 done()
},
afterLeave: function (el) {
 // ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
 // ...
}

下面是animation常用的动画效果

fade: {
 title: '淡入淡出',
 fadeIn: '淡入',
 fadeInDown: '向下淡入',
 fadeInDownBig: '向下快速淡入',
 fadeInLeft: '向右淡入',
 fadeInLeftBig: '向右快速淡入',
 fadeInRight: '向左淡入',
 fadeInRightBig: '向左快速淡入',
 fadeInUp: '向上淡入',
 fadeInUpBig: '向上快速淡入',
 fadeOut: '淡出',
 fadeOutDown: '向下淡出',
 fadeOutDownBig: '向下快速淡出',
 fadeOutLeft: '向左淡出',
 fadeOutLeftBig: '向左快速淡出',
 adeOutRight: '向右淡出',
 fadeOutRightBig: '向右快速淡出',
 fadeOutUp: '向上淡出',
 fadeOutUpBig: '向上快速淡出'
},
bounce: {
 title: '弹跳类',
 bounceIn: '弹跳进入',
 bounceInDown: '向下弹跳进入',
 bounceInLeft: '向右弹跳进入',
 bounceInRight: '向左弹跳进入',
 bounceInUp: '向上弹跳进入',
 bounceOut: '弹跳退出',
 bounceOutDown: '向下弹跳退出',
 bounceOutLeft: '向左弹跳退出',
 bounceOutRight: '向右弹跳退出',
 bounceOutUp: '向上弹跳退出'
},
zoom: {
 title: '缩放类',
 zoomIn: '放大进入',
 zoomInDown: '向下放大进入',
 zoomInLeft: '向右放大进入',
 zoomInRight: '向左放大进入',
 zoomInUp: '向上放大进入',
 zoomOut: '缩小退出',
 zoomOutDown: '向下缩小退出',
 zoomOutLeft: '向左缩小退出',
 zoomOutRight: '向右缩小退出',
 zoomOutUp: '向上缩小退出'
},
rotate: {
 title: '旋转类',
 rotateIn: '顺时针旋转进入',
 rotateInDownLeft: '从左往下旋入',
 rotateInDownRight: '从右往下旋入',
 rotateInUpLeft: '从左往上旋入',
 rotateInUpRight: '从右往上旋入',
 rotateOut: '顺时针旋转退出',
 rotateOutDownLeft: '向左下旋出',
 rotateOutDownRight: '向右下旋出',
 rotateOutUpLeft: '向左上旋出',
 rotateOutUpRight: '向右上旋出'
},
flip: {
 title: '翻转类',
 flipInX: '水平翻转进入',
 flipInY: '垂直翻转进入',
 flipOutX: '水平翻转退出',
 flipOutY: '垂直翻转退出'
},
strong: {
 title: '强调类',
 bounce: '弹跳',
 flash: '闪烁',
 pulse: '脉冲',
 rubberBand: '橡皮筋',
 shake: '左右弱晃动',
 swing: '上下摆动',
 tada: '缩放摆动',
 wobble: '左右强晃动',
 jello: '拉伸抖动'
}

结尾,学习用些transition和animation肯定能增加用户体验感,做出一些高大上的网页。

到此这篇关于详解vue中使用transition和animation的实例代码的文章就介绍到这了,更多相关vue使用transition和animation内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue2实现provide inject传递响应式
May 21 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 #Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 #Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 #Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 #Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 #Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 #Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 #Vue.js
You might like
星际流派综述
2020/03/04 星际争霸
COM in PHP (winows only)
2006/10/09 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
angular-tree-component的使用详解
2018/07/30 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
python中的常量和变量代码详解
2018/07/25 Python
python如何求解两数的最大公约数
2018/09/27 Python
如何基于python测量代码运行时间
2019/12/25 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
教师个人剖析材料
2014/02/05 职场文书
寄语学生的话
2014/04/10 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
Pytest中conftest.py的用法
2021/06/27 Python
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技