1、vue.js中的元素动画或页面跳转动画有多种实现方式比如:
1、自己手动写css3动画来实现
2、使用第三方css动画库如:Animate.css
3、在构子函数中操作DOM
4、使用第三方js动画库如:Velocity.js
2、Vue.js官方提供了默认的动画组件 transition ,例子:
<div id="demo">
<button @click='show=!show'>切换</button>
<transition name='fade'> //将需要执行动画的元素包裹在transition标签中,并制定动画名称
<p v-if='show'>Hello</p>
</transition>
</div>
new Vue({
el:'demo',
data:{
show:true
}
})
.fade-enter-active,.fade-leave-active{
transition:opacity .5s
}
.fade-enter,.fade-leave-to{
opacity:0
}
transition执行:目标元素是否应用CSS过渡或动画(增删类名)-->调用构子函数
3、transition过渡的类名
状态A-->状态B
v-enter:元素初始状态
v-enter-to:动画结束后状态
v-enter-active:动画过渡过程,用来定义动画时间、延迟、曲线函数
状态B-->状态A
v-leave:返回动画执行前状态
v-leave-to:返回动画执行后状态
v-leave-active:返回动画过渡过程,用来定义动画时间、延迟、曲线函数
见官网图如下:( V 代表动画的类名)
4、使用CSS动画
<div id='demo'>
<button @click='show=!show'>切换</button>
<transition name='bounce'>
<p v-show='show'>Hello</p>
</transition>
</div>
new Vue({
el:'#demo',
data:{
show:true
}
})
.bounce-enter-active{
animation:bounce-in .5s;
}
.bounce-leave-active{
animation:bounce-in .5s reverse;
}
@keyframes bounce{
0%{
transform:scale(0)
}
50%{
transform:scale(1.5)
}
100%{
transform:scale(1)
}
}
5、使用第三方CSS动画库 Animate.css
通过以下特性自定义过渡类名(可结合第三方CSS库):
enter-class
enter-to-class
enter-active-class
leave-active
leave-to-class
leave-active-class
<div id='demo'>
<button @click='show=!show'>切换</button>
<transition name='custom-classes-trandition' enter-active-class='animated tada' leave-active-class='animated bounceOutRight'>
<p>Hello</p>
</transition>
</div>
new Vue({
el:'demo',
data:{
show:true
}
})
6、动画过渡时间
<transition :duration="1000">...</transition> //设置1000毫秒时间
<transition :duration="{enter:500,leave:800}">...</transition> //设置进入时间和回退时间
7、Vue.js的JavaScript动画构子函数
<transition @before-enter='beforeEnter'
@enter='enter'
@after-enter='afterEnter'
@enter-cancelled='enterCancelled'
@before-leave='beforeLeave'
@leave='leave'
@after-leave='afterLeave'
@leave-cancelled='leaveCancelled'
:css='false' >
</transition>
//对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false",Vue 会跳过 CSS 的检测
methods:{
beforeEnter:function(el){},
enter:function(el,done){
done(); //当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调
},
afterEnter:function(el){},
enterCancelled:function(el){},
beforeLeave:function(el){},
leave:function(el){
done();
},
afterLeave:function(el){},
leaveCancelled:function(el){}
}
//钩子函数可以结合 CSS transitions/animations 使用,也可以单独使用
8、使用第三方JavaScript动画库Velocity.js
<div id="demo">
<button @click="show = !show">切换</button>
<transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false" >
<p v-if="show">Hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
})
9、通过 appear 特性设置节点在初始渲染的过渡
<transition appear> </transition>
自定义过渡类名:
<transition appear
appear-class="custom-appear-class"
appear-to-class="custom-appear-to-class"
appear-active-class="custom-appear-active-class">
</transition>
自定义JavaScript构子:
<transition appear
@before-appear='BeforeAppearHook'
@appear='AppearHook'
@after-appear='AfterAppearHook'
@appear-cancelled='AppearCancelledHook'>
</transition>
10、多个元素的过渡(使用key)
<transition>
<button :key="docState">
{{ buttonMessage }}
</button>
</transition>
computed: {
buttonMessage: function () {
switch (this.docState) {
case 'saved': return '编辑'
case 'edited': return '保存'
case 'editing': return '取消'
}
}
}
过渡模式
out-in 当前元素先进行过渡,完成之后新元素过渡进入
in-out 新元素先进行过渡,完成之后当前元素过渡离开
<transition name="fade" mode="out-in"> </transition>
11、多个组件的过渡(使用动态组件)
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
new Vue({
el:'demo',
data:{
view:'v-a'
},
components:{
'v-a':{
template:`<div>组件A</div>`
},
'v-b':{
template:`<div>组件B</div>`
}
}
})
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to {
opacity: 0;
}
12、<transition-group> 组件实现列表的过渡
<transition-group>组件会渲染成<span>标签,可通过 tag 特性更换为其他元素。
目标元素必须提供唯一的 key 值
<div id='demo'>
<button @click='add'>添加</button>
<button @click='remove'>删除</button>
<button @click='shuffle'>打乱</button>
<transition-group name='list' tag='div'>
<span v-for='item in items' :key='item' class='list-item'>
{{item}}
</span>
</transition-group>
</div>
//_.shuffl(arr) 随机打乱数组,并返回被打乱的数组
//arr.splice(index,0,item) 在index位置添加一个 item 元素
//arr.splice(index,1) 在index位置删除1个元素
new Vue({
el:'demo',
data:{
items:[1,2,3,4,5,6,7,8,9],
nextNum:10
},
methods:{
randomIndex:function(){ //返回1~9之间的随机数
return Math.floor(Math.random()*this.items.length)
},
add:function(){
this.items.splice(this.randomIndex,0,nextNum++); //在随机的位置添加一个数
},
remove:function(){
this.items.splice(this.randomIndex,1); //在随机的位置删除一个数
},
shuffle:function(){
this.items=_.shuffle(this.items); //返回顺序被打乱的数组
}
}
})
.list-item{
transition:all 1s;
display:inline-block;
margin-right:10px;
}
.list-leave-active {
position: absolute;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}
13、与JavaScript交互实现交错过渡(Velocity.js)
<div id='demo'>
<input v-model='query'> //根据用户输入筛选显示列表中符合项+动画
<transition-group name='fade' tag='ul' :css='false' @before-enter='beforeEnter' @enter='enter' @leave='leave'>
<li v-for='(item,index) in items' :key='item.msg' :data-index='index'>
{{item.msg}}
</li>
</transition-group>
</div>
new Vue({
el:'#demo',
data:{
query:'',
list:[
{msg:'then'},
{msg:'reject'},
{msg:'undefiend'},
{msg:'resolve'}
]
},
computed:{
showList:function(){
var vm=this;
return this.list.filter(function(item){
return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !==-1
})
}
},
methods:{
beforeEnter:function(el){
el.style.opacity=0;
el.style.height=0;
},
enter:function(el,done){
var delay=el.dataset.index*150;
setTimeout(function(){
Velocity(
el,
{ opacity: 1, height: '1.6em' },
{ complete: done }
)
}, delay)
},
leave:function(el,done){
var delay = el.dataset.index * 150
setTimeout(function () {
Velocity(
el,
{ opacity: 0, height: 0 },
{ complete: done }
)
}, delay)
}
}
})
14、创建可复用的过渡
//任务:只需将需要实现动画的元素或列表放入该过渡组件中即可实现相应的动画
方式一:
Vue.component('my-special-transition', {
template: '\
<transition\
name="very-special-transition"\
mode="out-in"\
v-on:before-enter="beforeEnter"\
v-on:after-enter="afterEnter"\
>\
<slot></slot>\
</transition>\
',
methods: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
})
函数组件更适合完成这个任务:
Vue.component('my-special-transition', {
functional: true,
render: function (createElement, context) {
var data = {
props: {
name: 'very-special-transition',
mode: 'out-in'
},
on: {
beforeEnter: function (el) {
// ...
},
afterEnter: function (el) {
// ...
}
}
}
return createElement('transition', data, context.children)
}
})
15、动态过渡(根据组件的状态设置不同的过渡动画)
<transition :name="transitionName"> </transition>
//通过事件的钩子函数方法,可以在获取到相应上下文数据。这意味着,可以根据组件的状态通过 JavaScript 过渡设置不同的过渡效果
//最终方案是组件通过接受 props 来动态修改之前的过渡。一句老话,唯一的限制是你的想象力。
来源:https://segmentfault.com/a/1190000016366877
CSS 动画主要分为CSS 动画分类和CSS 常用动画库简介与JS 动画;然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes,keyframes主要是从keyframes规则和keyframes属性来介绍
独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android、iOS、H5,稍加改动还可适配微信小程序。在使用Vue.js开发移动端页面的时候,默认的组件转场效果过于生硬
CSS3 主要可以分为几个模块:边框和背景,渐变,文字特效,字体,2D/3D转换,动画(过渡动画和动画),选择器,盒模型,多列布局,用户界面。
组件的过渡、条件的渲染(使用v-if)、条件的展示(使用v-show)、动态组件、组件根节点;下面是一个运用css点击显示隐藏显示的2s动画效果:
这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。HTML结构:4种loading预加载动画的HTML结构分别如下
可以让页面中指定的元素按照设定的方式“动”起来,运用的是人视觉延迟的原理,连续地在上一张图消失之前插入下一张;1.animation-name对象的动画名称,以便后续设置动画属性时使用默认为none
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 \\\"from\\\" 和 \\\"to\\\",等同于 0% 和 100%。
CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的
自己封装好的showhide.js包含无动画、css3动画、js动画,包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlideUpDown(淡入淡出+上下滑动) fadeSlideLeftRight (淡入淡出+左右滑动)
最近在练习CSS3的关键帧动画(keyframes),于是做了一个简单的牛顿摆(听名字可能陌生,但你一定见过它),实现起来并不复杂,只需对最左和最右的小球进行关键帧动画处理,同时注意应该将绳子与小球作为一个整体
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!