详解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 18 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue项目配置sass及引入外部scss文件
Apr 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
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
实现WordPress主题侧边栏切换功能的PHP脚本详解
2015/12/14 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
浅析vue-router原理
2018/10/19 Javascript
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
浅析python实现动态规划背包问题
2020/12/31 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
中国医药集团国药在线:国药网
2017/02/06 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
美术教师自我鉴定
2014/02/12 职场文书
经典商业广告词
2014/03/13 职场文书
公司建议书怎么写
2014/05/15 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android