zoukankan      html  css  js  c++  java
  • vue钩子函数实现小球半场动画

    移动电商常见的一种特效,点击加入购物车的时候,会有一个小球落入购物车,

    如果用vue做项目的话,那么这个功能如何实现呢。

    <!--
     * @Descripttion: 
     * @version: 
     * @Author: yang_ft
     * @Date: 2019-12-10 15:12:52
     * @github: famensaodiseng
     * @LastEditTime: 2019-12-10 15:41:25
     -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
          .one {
             30px;
            height: 30px;
            background-color: pink;
            border-radius: 50%;
          }
        </style>
      </head>
      <body>
        <div id="app">
          <button @click="flag=!flag">加入购物车</button>
          <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
            ><div class="one" v-show="flag"></div
          ></transition>
        </div>
      </body>
      <script src="lib/vue-2.5.16.js"></script>
      <script>
        let vm = new Vue({
          el: "#app",
          data: {
            flag: false
          },
          methods: {
            //入场之前,设置小球的初始状态
            beforeEnter(el) {
              el.style.transform = "translate(0,0)";
              //el他是原生的,表示被动画控制的那个元素
            },
            //入场之后,设置小球的中指状态
            enter(el, done) {
              el.offsetWidth; //这一行没有实际意义。
              el.style.transform = "translate(300px,300px)";
              el.style.transition = "all 2s ease";
              done();
              //   done是一个回调函数;
              //   这个done()就是afterenter函数的一个引用
            },
            //动画完成以后,重置相关的动画数据
    
            afterEnter() {
              this.flag = false;
            }
          }
        });
      </script>
    </html>
  • 相关阅读:
    P3469 [POI2008]BLO-Blockade
    洛谷P2342 叠积木
    洛谷 P1197 [JSOI2008]星球大战
    洛谷P1967 货车运输
    洛谷P2812校园网络【Network of Schools加强版】
    洛谷P3003 苹果交货Apple Delivery
    luogu Eat the Trees
    插头DP模板
    [NOIP2017] 宝藏
    LOJ6268拆分数
  • 原文地址:https://www.cnblogs.com/famensaodiseng/p/12017073.html
Copyright © 2011-2022 走看看