vue动画—通过钩子函数实现半场动画

vue

注意:

1.起始位置设置了一个(0,0)在第一遍执行时,是没有作用的。在一次入场动画执行完成之后,在最终位置停下来并不在起始位置,通过这里的位置的设置可以将入场动画结束时的位置调到这里

2.理解enter()函数的el的指代对象和done()指代的回调函数

HTML代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script src="../lib/vue.js"></script>

</head>

<style>

.ball{

margin: 50px 50px;

width: 15px;

height: 15px;

border-radius: 50px;

background-color: brown;

}

</style>

<body>

<div id="app">

<input type="button" value="跳进篮子里" v-on:click="show=!show">

<transition

v-on:before-enter="bEnter"

v-on:enter="enter"

v-on:after-enter="aEnter">

<div class="ball" v-show="show"></div>

</transition>

</div>

<script>

var vm = new Vue({

el:'#app',

data:{

show:false

},

methods:{

bEnter(el){

el.style.transform = "translate(0,0)"

//表示动画入场之前,坐标表示位置是在起始位置不动

//在一次入场动画执行完成之后,在最终位置停下来并不在起始位置,通过这里的位置的设置可以将入场动画结束时的位置调到这里

},

enter(el,done){

el.offsetTop;

//必须要写一下offsetTop,offsetWeith等四种中的其中一种,强制刷新动画

el.style.transform = "translate(200px,450px)";

el.style.transition = "all 2s ease";

done()

//done是enter方法的原生的引用函数名,这里表示是回调函数,也就是接下来执行的操作aEnter(),消灭延迟效果。

},

aEnter(el){

this.show = !this.show;

}

}

//这里的el代表,将要执行半场动画的对象,是第一个原生的参数,跟自定义指令的el作用是一样的

});

</script>

</body>

</html>

效果:

以上是 vue动画—通过钩子函数实现半场动画 的全部内容, 来源链接: utcz.com/z/378200.html

回到顶部