vue高实4--vue动画（采用钩子函数实现）

本篇使用JavaScript钩子函数进行过渡和动画@before-enter   @enter      @after-enter

模拟点击购物， 把商品扔到 购物车的 动画效果

    //vue  动画部分

    //1. <transition> 中间是动画的html</transition>，通过css设定动画元素的位置

    // 2.进入动画之前获得 点击元素的位置，把小球移过来(transform过渡过来)

    //3.进入动画之时，把小球返回到原来的位置

 

<template>

  <div>

    <el-row>

      <el-col :span="6" v-for="(item, index) in goods" :key="index">

        <el-card>

          <img :src="item.img" class="image" alt="books" />

          <div style="padding:14px;">

            <span>{{ item.title }}</span>

            <el-button

              type="text"

              class="button"

              @click="addCart($event, item)"

            >

              <i class="el-icon-circle-plus"></i>

              添加

            </el-button>

          </div>

        </el-card>

      </el-col>

    </el-row>

    <!-- vue动画的html -->

    <div class="ball-warp">

      <transition

        name="fade"

        @before-enter="beforeEnter"

        @enter="enter"

        @after-enter="afterEnter"

      >

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

          <div class="inner">

            <div class="el-icon-circle-plus"></div>

          </div>

          <!-- <div class="el-icon-circle-plus"></div> -->

        </div>

      </transition>

    </div>

  </div>

</template>

 

<script>

import axios from "axios";

export default {

  data() {

    return {

      goods: [],

      ball: {

        show: false,

        el: null

      }

    };

  },

  async created() {

    let res = await axios.get("./api/goods");

    this.goods = res.data.data;

    console.log(res);

  },

  methods: {

    addCart($event, item) {

      this.ball.el = $event.target;//点击的位置

      this.ball.show = true;

      this.$store.commit("addcart", item);

    },

    //vue  动画部分

    //1. <transition> 中间是动画的html</transition>，通过css设定动画元素的位置

    // 2.进入动画之前获得 点击元素的位置，把小球移过来(transform过渡过来)

    //3.进入动画之时，把小球返回到原来的位置

    beforeEnter(el) {

      //小球移动过来到点击的位置

      let dom = this.ball.el;

      console.log(el);

      let rect = dom.getBoundingClientRect(); //获取某个元素相对于视窗的位置集合

      console.log(rect);

      let x = window.innerWidth - rect.left - 130;

      let y = rect.top - 25;

      el.style.display = "";

      // el.style.transform = "translate3d(-" + x + "px," + y + "px, 0)";

      el.style.transform = "translate3d(0," + y + "px, 0)";

      let inner = el.querySelector(".inner");

      inner.style.transform = "translate3d(-" + x + "px, 0, 0)";

    },

    enter(el, done) {

      console.log(el);

      console.log(done);

      this._offset = document.body.offsetHeight;

      el.style.transform = `translate3d(0,0,0)`;

      let inner = el.querySelector(".inner");

      inner.style.transform = `translate3d(0,0,0)`;

      el.addEventListener("transitionend", done); //动画结束

    },

    afterEnter(el) {

      this.ball.show = false;

      el.style.display = "none";

    }

  }

};

</script>

 

<style lang="stylus" scoped>

.ball-warp

  .ball

    position fixed

    right 90px

    top 25px

    z-index 200

    color red

    transition all 1s cubic-bezier(0.49,-0.29,0.75,0.41)

    .inner

      width:16px;

      heiht:16px;

      transition all 1s linear

</style>