vue.js - 无法即时更改过渡组的过渡

Question

在我的应用程序中，单击模态框的关闭按钮会使其消失并带有淡入淡出动画，而向下滑动会使其消失并带有滑动动画。这是通过更改模态的 <transition name> 来完成的。基于事件。

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

CodeSandbox

模板:

<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;
}

Answer 1

问题出在组件更新的时机上。您将在与元素关闭时相同的更新周期中将过渡模式切换回 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