3

在我的应用程序中，单击模式的关闭按钮使其随着淡入淡出动画消失，而向下滑动它使其随着滑动动画消失。这是通过<transition name>根据事件更改模式来完成的。

同样的事情似乎不适用于过渡组。我做错了什么，还是实际上不可能？

代码沙盒

模板：

<transition-group :name="itemTransition">
  <div
    v-for="item in items"
    :key="item.id"
    v-hammer:swipe.up="() => onSwipeUp(notification.id)"
  >
  </div>
</transition-group>

脚本：

export default {
  data () {
    return {
      applySwipeTransition: false
    }
  },
  computed: {
    itemTransition () {
      return this.applySwipeTransition ? 'swipe' : 'fade'
    }
  },
  methods: {
    onSwipeUp (id) {
      this.applySwipeTransition = true
      this.$nextTick(() => {
        this.closeItem(id)
        this.applySwipeTransition = false
      })
    }
  }
}

CSS：

.fade-leave-active {
  animation: fade-out .75s;
}

.swipe-leave-active {
  animation: slide-up .25s;
}
4

2 回答 2

3

问题在于组件更新的时机。您正在将转换模式切换回fade与元素关闭时相同的更新周期。因此，当触发下一个组件更新时（通过删除项目），转换已经切换回fade. 此时，您可能已经猜到需要做的就是在下一次更新中切换回过渡，由删除项目触发：

   onSwipeUp (id) {
     this.applySwipeTransition = true
     this.$nextTick(() => {
        this.closeItem(id)
        this.$nextTick(()=>{
          this.applySwipeTransition = false
        })         
     })
   }

由于没有理由等待组件更新关闭项目，您可以稍微简化代码：

   onSwipeUp (id) {
      this.applySwipeTransition = true
      this.closeItem(id)
      this.$nextTick(() => {
        this.applySwipeTransition = false
      })
    }

这是您的工作沙箱：https ://codesandbox.io/s/vue-template-forked-60lkk?file=/src/App.vue

于 2021-05-26T21:05:47.073 回答
0

因此，我通过手动将 更改name为<transition-group或查看 CSS 动画fade是否swipe存在问题来解决您的 CSS。

结论：作品fade。swipe仅通过单击和拖动来list-item切换页面，而不是真正的滑动，如果这与您有关（顺便说一下，我的滑动是 MacOS 滑动 - 两指，没有点击）

尽管如此，在不更改 CodePen 的情况下，问题似乎出在您的属性上，即使您已将其绑定到一个属性computed，也没有任何指示动态更改- for 的逻辑似乎总是默认为，因为永远不会等于“刷卡” ”，因为当您手动更改为（请参阅“判决）”时，CSS 确实有效。namecomputeditemTransition()fadeapplySwipeTransitionnameswipe

要查看根本问题出在哪里，我使用了您的itemTransition()：

computed: {
    itemTransition() {
      return this.applySwipeTransition ? "fade" : "swipe";
    },

切换fadeand swipenow 的顺序就可以了swipe。我希望这能让你对这个问题有所了解。如果需要，您可能需要创建自定义 Vue 指令或事件来处理滑动/淡入淡出逻辑。

于 2021-05-26T21:03:11.050 回答