无法即时更改过渡组的过渡

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

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

结论：fade 有效。 swipe 仅将 list-item 转换为离开页面通过单击并拖动，而不是真正的滑动，如果这与您有关（顺便说一下，我的滑动是 MacOS 滑动 - 两指，没有点击)

不过，在不更改 CodePen 的情况下，问题似乎出在您的 computed 属性上，即使您已将其绑定到 computed 属性，也没有什么告诉 name 动态更改 - @ 的逻辑987654333@ 似乎总是默认为fade，因为applySwipeTransition 永远不会等于“滑动”，因为当您手动将name 更改为swipe 时CSS 确实有效（参见“判决”）。

为了了解根本问题出在哪里，我使用了您的 itemTransition()：

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

切换fade 和swipe 的顺序现在可以使swipe 工作。我希望这能让你对这个问题有所了解。如果需要，您可能需要创建 custom Vue directive 或 event 来处理滑动/淡入淡出逻辑。

Answer 2

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

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

由于没有理由等待组件更新关闭item，所以可以稍微简化一下代码：

   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