前端应用_Vue_钩子函数实现小球半场动画

程序员文章站 2022-07-08 07:57:50

...

前面我介绍的都是有enter 还有leave ，但是有的场景就只是enter ，没有leave动画，

我所认识的场景有这些：

1.大家玩游戏都知道，当我们充值元宝或者砖石的时候，充值完成了，有个慢动作，就是金币或者元宝进入一个咱们储存的袋子，并且还有配音。
2.我们购物的时候，当点击加入购物车的时候，有个动画就是从开始点的地方直接跑到购物车的图标里
3. 当我们玩游戏的时候，看到有金币或者枪的时候，当捡起的时候也有个动作就是枪或者金币直接进入了储存袋里.

他们都有一个共同特点就是只进不出，所以用enter 就行了，如果想做出的效果，可以用leave .

先介绍三个钩子函数专门为进场效果准备的

before-enter

这个就是定义入场前的状态，比如我们定义他的位置，从哪个地方开始进场,一般都是初始位置.

el.style.transform=“translate(0,0)”

enter

这个就是过度的状态，设置它的终点站在哪，并设置如何过度.

设置终点站：
el.style.transform=“translate(120px,600px)”
如何过度：

el.style.transition=“all 1s ease”

after-enter

达到终点了，该如何做呢，一般都是让过度的小球消失 .

实例的思路如下：

首先要v-if 或者v-show 控制小球的显示和消失
设置小球的 css 样式
然后用transition 包裹css 样式。
定义钩子函数三个
有不懂得请留言，我必回，谢谢
实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >

   <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
<style>
        .ball{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ecba52;
        }
</style>


</head>
<body>
<div id="pp" class="ball" >

    <div >

        <input type="button"  value="快到这里来" @click="flag=!flag">

    </div>
<transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
    >
    <div  class="ball" v-show="flag"></div>
      </transition>


</div>
<div>

    <script>
          var vue=new  Vue(
            {
                el: '#pp',
                data: {
                    id:'',
                    name:'',
                    flag: false
                },
                methods: {
                    beforeEnter(el){
                        el.style.transform="translate(0,0)"

                    },
                    enter(el,done){
                        done()  // 时间这个就是 after-enter . 让小球立即消失 
                        el.offsetWidth    // 这个必须写，否则没有过度效果  
                          el.style.transform="translate(120px,600px)"
                          el.style.transition="all 0.5s ease"
                    },
                    afterEnter(el){
                        this.flag=!this.flag

                    },
                    add: function () {
                        this.list.push({id:this.id,ctime:new Date(),name: this.name})
                        this.name=this.id=''
                    }

                }
            }
        )
    </script>
</div>
</body>
</html>

效果自己尝试下.

上一篇：导致嵇康双重性格的原因究竟是什么？

下一篇： Spring注解开发