transition vue,vue中transition用法
本文主要介绍了vue中使用的过渡和动画的示例代码。这篇文章很详细，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。
以前写页面重在功能，而对于过渡和动画，我们只听到了他们的声音，没有看到他们的人。我们总是被页面动画效果的心理学所逗乐。最近做了一个活动页面，要求页面很酷。终于有机会仔细了解了一下。
Transition:英语意为过渡，其作用是过渡效果；动画：英语生动活泼，生气勃勃，鼓舞人心。动画就是动画电影，它的作用就是动画效果。
w3school中的过渡示例：
//将鼠标悬停在div元素上，并逐渐将表格的宽度从100px更改为300px:
差异
{
宽度：100px
过渡：宽度2s；
-webkit-transition:宽度2s；/*游猎*/
}
div:hover { width:300 px；}
//transition属性是一个速记属性，用于设置四个转换属性：
//指定CSS属性的名称、过渡效果
过渡属性
//需要指定多少秒或多少毫秒//转场效果才能完成？
过渡持续时间
//指定转场效果的旋转速度曲线
过渡时间函数
//定义过渡效果开始的时间
过渡延迟
w3school中的动画示例：
//使用速记属性将动画绑定到div元素。
差异
{
动画：mymove 5s infinite
-WebKit-动画：mymove 5s infinite/* Safari和Chrome */
}
//animation属性是一个速记属性，用于设置六个动画属性：
//指定需要绑定到选择器的关键帧的名称。
动画名称
//指定完成动画所需的时间，以秒或毫秒为单位。
动画-时长
//指定动画的速度曲线。
动画-计时-功能
//指定动画开始前的延迟。
动画延迟
//指定动画应该播放的次数。
动画-迭代-计数
//指定动画是否应该反过来播放。
动画方向
动画使用@关键帧来指定动画。
@keyframes animationname {
关键帧选择器{
css样式；
}
}
//必需。定义动画的名称。
动画名称
//必需。动画持续时间的百分比。
//合法值：
//0-100%
//来自(与0%相同)
//到(与100%相同)
关键帧选择器
//必需。一个或多个有效的CSS样式属性。
css样式
以上是转场和动画的基础知识。大部分项目用的都是vue这样的主流框架，所以用vue用过渡和动画。
1.第一步是安装依赖关系，只有动画动画动画库。transiton是一个可以直接使用的标签，不用下载依赖。
npm安装animate . CSS保存
2.全局引用动画动画库
从“animate.css”导入动画
Vue.use(动画)；
3.只需使用动画库，只需将指定的动画效果名称添加到类中即可。
div class=rotateIn
style= animation-duration:2s；
动画-延时：1s；
动画-迭代-计数：1；
动画-填充-模式：两者都有；
/div
div class=fadeInLeft
style= opacity:0；
动画——时长：3s；
动画-延时：2s；
动画-迭代-计数：1；
动画-填充-模式：两者都有；
/div
div class=fadeInUp
style= opacity:0；
动画——时长：3s；
动画-延时：3s；
动画-迭代-计数：1；
动画-填充-模式：两者都有；
/div
4.正式使用过渡和动画，提高你的知识，并使用过渡标签。
1.使用基本的过渡和动画。
/*v是默认值，name属性在transition中定义。
过渡名称=淡化
V-enter-from将更改为fade-enter-from。
*/
过渡
divhello world/div
/过渡
//使用transition标签时，直接在css中控制
/*元素输入前的效果*/。v-enter-from{
不透明度：0；
}
/*元素进入*/时的效果。v-enter-active{
/*使用定义的动画*/
动画：抖0.3s
}
/*输入元素后的效果*/。v-enter-to{
不透明度：1；
}
/*元素离开前的效果*/。v-离开{
不透明度：1；
}
/*元素离开时的效果*/。v-离开-活动{
/*使用定义的动画*/
动画：抖0.3秒
}
/*元素离开后效果*/。五-离开到{
不透明度：0;
}
/*定义一个动画效果*/
@关键帧抖动{
0%{
transform:平移x(-100px)；
}
50%{
transform:平移x(-50px)；
}
0%{
transform:平移x(50px)；
}
}
2、使用转换标签的属性，结合动画的动画库
过渡
过渡：持续时间={enter:1500，leave:600}
enter-from-class=animated
enter-active-class=animated
enter-to-class=animated
leave-from-class=动画淡出
leave-active-class=动画淡出
leave-to-class=动画淡出
v-on:before-enter=beforeEnter
v-on:enter=enter
v-on:after-enter=afterEnter
v-on:enter-cancelled= enter cancelled
v-on:before-leave=beforeLeave
离开=离开
v-on:after-leave=afterLeave
v-on:leave-canceled= leave canceled
mode=out-in 出现
/*从类中输入就是五-进入-从元素进入前
愉快的就是使用动画动画库，淡出就是动画效果
*/
/*before-enter这些就是钩子函数，是滑动进入状态
mode=out-in 是设定动画是先入后出，还是先出后入
出现是设置加载时就要开始动画
*/
//进入中
//动画进入前
//-
输入前：函数(el) {
//el就是数字正射影像图元素
//.
},
//此回调函数是可选项的设置
//与半铸钢钢性铸铁(铸造半钢)结合时使用
//动画进入时
enter: function (el，done) {
//.
完成()
},
//动画进入后
回车后：函数(el) {
//.
},
//动画进入完成
回车取消：函数(el) {
//.
},
//-
//离开时
//-
离开前：函数(el) {
//.
},
//此回调函数是可选项的设置
//与半铸钢钢性铸铁(铸造半钢)结合时使用
leave: function (el，done) {
//.
完成()
},
休假后：职能(el) {
//.
},
//离开取消只用于虚拟展示中
休假取消：函数(el) {
//.
}
下面是动画常用的动画效果
褪色：{
标题： 淡入淡出，
淡入： 淡入，
fadeInDown:向下淡入，
fadeInDownBig:向下快速淡入，
fadeInLeft:向右淡入，
fadeInLeftBig:向右快速淡入，
fadeInRight:向左淡入，
fadeInRightBig:向左快速淡入，
fadeInUp:向上淡入，
fadeInUpBig:向上快速淡入，
淡出： 淡出，
fadeOutDown:向下淡出，
fadeOutDownBig:向下快速淡出，
fadeOutLeft:向左淡出，
fadeOutLeftBig:向左快速淡出，
adeOutRight:向右淡出，
fadeOutRightBig:向右快速淡出，
fadeOutUp:向上淡出，
fadeOutUpBig:向上快速淡出
},
弹跳：{
标题： 弹跳类，
bounceIn:弹跳进入，
bounceInDown:向下弹跳进入，
bounceInLeft:向右弹跳进入，
bounceInRight:向左弹跳进入，
bounceInUp:向上弹跳进入，
bounceOut:弹跳退出，
bounceOutDown:向下弹跳退出，
bounceOutLeft:向左弹跳退出，
bounceOutRight:向右弹跳退出，
bounceOutUp:向上弹跳退出
},
缩放：{
标题： 缩放类，
zoomIn:放大进入，
zoomInDown:向下放大进入，
zoomInLeft:向右放大进入，
zoomInRight:向左放大进入，
zoomInUp:向上放大进入，
祖穆特： 缩小退出，
zoomOutDown:向下缩小退出，
zoomOutLeft:向左缩小退出，
zoomOutRight:向右缩小退出，
zoomOutUp:向上缩小退出
},
旋转：{
标题： 旋转类，
rotateIn:顺时针旋转进入，
rotateInDownLeft:从左往下旋入，
固有旋转：从右往下旋入，
rotateInUpLeft:从左往上旋入，
rotateInUpRight:从右往上旋入，
rotateOut:顺时针旋转退出，
rotateOutDownLeft:向左下旋出，
转出彻头彻尾： 向右下旋出，
rotateOutUpLeft:向左上旋出，
rotateOutUpRight:向右上旋出
},
翻转：{
标题： 翻转类，
flipInX:水平翻转进入，
flipInY:垂直翻转进入，
flipOutX:水平翻转退出，
flipOutY:垂直翻转退出
},
strong: {
标题： 强调类，
反弹： 弹跳，
闪光： 闪烁，
脉搏： 脉冲，
橡皮筋： 橡皮筋，
摇一摇左右弱晃动，
摇摆： 上下摆动，
多达：缩放摆动，
摇晃：“从一边到另一边的强烈摇晃”，
果冻：“拉伸抖动”
}
最后，学会使用一些过渡和动画，一定会增加用户体验，做出一些高大上的网页。
这就是本文关于解释vue中过渡和动画的示例代码。关于vue中过渡和动画的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。