本篇文章给大家分享的是有关transition与animation如何在vue中使用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
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中使用,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。