在vue中写一个小球做抛物线的动作，但是下降位置不对

最新推荐文章于 2024-08-01 10:35:11 发布

赏花赏景赏时光

最新推荐文章于 2024-08-01 10:35:11 发布

阅读量981

点赞数

分类专栏： vue 文章标签：在vue中写一个小球做抛物线的动作，但是下降位置不对

本文链接：https://blog.csdn.net/tangxiujiang/article/details/80213451

版权

vue 专栏收录该内容

61 篇文章 7 订阅

订阅专栏

在vue中写一个小球做抛物线的动作，但是下降位置不对

如下图1

图1

点击图1中的红色框中的“加入购物车”，出现图2中的现象

图2

小球下落的位置不对

该现象的food.vue的<template>如下图3所示

图3

.buy的css如下所示

.buy
      position: absolute
      right:18px
      bottom:18px
      z-index:10
      height:24px
      line-height:24px
      padding:0 12px
      box-sizing:border-box
      font-size:10px
      border-radius: 12px
      color: #ffffff
      background:rgb(0,160,220)

小球的触发时机是在show()函数里面定义的，如下所示

       //点击“加入购物车”按钮事件
        addFirst(event){
          if(!event._constructed){
            return;
          }
          //通过Vue.set()为对象设置属性，从而当该属性改变的时候，浏览器能够监听到该属性变化
          //然后触发相应的事件的执行
          //第一次点击的时候，this.food对象里面还没有属性count，所以需要通过Vue.set()设置
          Vue.set(this.food,'count',1);
          //通过this.$emit()将被点击的对象传给父组件
          console.log(event.target);
          this.$emit('add',event.target);
        }

通过console.log(event.target)，在浏览器的console输出如下

显示display:none，因此获取不到小球刚开始的正确位置

解决方法，可以加入一个缓动的效果，在小球下降期间，这个div还没有设置成dixplay:none。即在该div外面加上一个transition，如下图所示：

.buy的css如下：

   .buy
      position: absolute
      right:18px
      bottom:18px
      z-index:10
      height:24px
      line-height:24px
      padding:0 12px
      box-sizing:border-box
      font-size:10px
      border-radius: 12px
      color: #ffffff
      background:rgb(0,160,220)
      opacity: 1
      &.fade-enter-active, &.fade-leave-active
        transition: all 0.2s
      &.fade-enter, &.fade-leave-active
        opacity: 0
        z-index: -1

加入缓动的效果，小球的动作就正确了