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

Question

在我的应用程序中，单击模态框的关闭按钮会使其消失并出现淡入淡出动画，而向下滑动会使其消失并出现滑动动画。这是通过根据事件更改模式的 <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;
}

Answer 1

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

结论： fade 有效。 swipe 仅通过单击和拖动将 list-item 移出页面 ，而不是真正的滑动 ，如果您担心的话（顺便说一句，我的滑动是 MacOS 滑动- 双指，无点击）

仍然，在不更改 CodePen 的情况下，问题似乎出在您的 computed 属性那里，即使您已将其绑定到，也没有任何内容告诉 name 动态更改computed 属性 - itemTransition() 的逻辑似乎总是默认为 fade 因为 applySwipeTransition 永远不会等于“滑动”，因为 [=当您手动将 name 更改为 swipe 时，45=] 确实有效（参见“判决”）。

为了找出根本问题所在，我解决了你的问题 itemTransition():

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

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

Answer 2

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

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

Can't change transition on the fly for a transition group

vue.js

vue-transitions