加入购物车动画

最新推荐文章于 2024-05-06 14:19:58 发布

昇鎽亂贳ԅㅂ

最新推荐文章于 2024-05-06 14:19:58 发布

阅读量165

点赞数

分类专栏： Vue相关文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_42307121/article/details/125429368

版权

Vue相关专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<template>
  <div class="box">
    <!-- 资源列表 -->
    <ul>
      <li>
        <img src="~@/assets/training/rl.png" alt="" />
        <!-- <img src="../images/t.png" alt=""> -->
        <p>这是标签</p>
        <p />
        <div class="btn-box">
          <el-button type="primary">申请</el-button>
          <el-button type="primary" ref="ceshi" @click="joinHandle"
            >加入购物车</el-button
          >
        </div>
      </li>
    </ul>
    <!-- 这是购物车 -->
    <div class="shopping">
      <div class="shopp-header">
        <!-- <img src="../images/shooping_car.png" alt=""> -->
        <img src="~@/assets/training/rl.png" alt="" />
      </div>
    </div>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <!-- <img v-if="addShow" src="../images/shopping.png" class="img_js" alt=""> -->
      <img
        v-if="addShow"
        src="~@/assets/training/rl.png"
        class="img_js"
        alt=""
      />
    </transition>
  </div>
</template>
 
<script>
export default {
  name: "",
  data() {
    return {
      addShow: false, //一开始加入购物车图标隐藏
      startTop: 0, //一开始加入购物车的显示的位置
      startLeft: 0,
    };
  },
  methods: {
    joinHandle(idx) {
      //获取当前点击的位置 也就是一开始加入购物车动画开始的位置
      //   this.startTop = this.$refs.ceshi[idx].getBoundingClientRect().top;
      //   this.startLeft = this.$refs.ceshi[idx].getBoundingClientRect().left;
      this.startTop = 100;
      this.startLeft = 100;
      this.addShow = true; //加入购物车图标显示
    },
    // 动画钩子函数
    // 进入前的状态
    beforeEnter(el) {
      el.style.left = this.startLeft + "px";
      el.style.top = this.startTop + "px";
      el.style.transform = "scale(1)";
    },
    // 进入中
    enter(el) {
      // 需要调用元素的offset操作，才有过渡效果，否则会马上执行
      el.offsetWidth;
      // 购物车的位置
      //   const sizeTop = `${document.documentElement.clientHeight / 2}`;
      //   const sizeLeft = `${document.documentElement.clienWidth - 160}`; //160 是我给购物车的宽度
      let sizeTop = 300;
      let sizeLeft = 300;
      el.style.left = sizeLeft + "px";
      el.style.top = sizeTop + "px";
      el.style.transform = "scale(0.5)";
      //   done();
    },
    // 进入后
    afterEnter() {
      this.addShow = false;
    },
  },
};
</script>
 
<style scoped>
.shopping {
  width: 160px;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.img_js {
  width: 20px;
  position: fixed;
  left: 0;
  top: 0;
  transition: all 1s;
}
</style>