欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端应用_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

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

实例的思路如下:

  1. 首先要v-if 或者v-show 控制小球的显示和消失
  2. 设置 小球 的 css 样式
  3. 然后用transition 包裹css 样式。
  4. 定义钩子函数 三个
    有不懂得请留言,我必回 ,谢谢
    实例如下:
<!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>

效果自己尝试下.