详解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 26 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 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
PHP伪静态页面函数附使用方法
2008/06/20 PHP
php自定义apk安装包实例
2014/10/20 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
php中异常处理方法小结
2015/01/09 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
Javascript实现的分页函数
2007/02/07 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
python生成验证码图片代码分享
2016/01/28 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
Python subprocess模块常见用法分析
2018/06/12 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
django实现模型字段动态choice的操作
2020/04/01 Python
python实例化对象的具体方法
2020/06/17 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
校园报刊亭的创业计划书
2014/01/02 职场文书
高中历史教学反思
2014/02/08 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL