Vue3 过渡：相互独立地控制幻灯片淡入和幻灯片淡出

Question

我正在尝试在我的项目中实现评论部分。每个评论都有自己的鹅毛笔编辑来回答。其背后的原因是，在我的移动版本上，我想显示固定在底部的鹅毛笔编辑器，而在我的桌面版本上，我想在用户想要回答的评论正下方显示一个鹅毛笔编辑器。

但是，我在转型过程中面临一个问题。当您按下评论回答按钮时，您可以看到羽毛笔编辑器如何从底部弹出。当您按下屏幕上的任意位置（除了另一个评论回答按钮）时，编辑器会再次滑动并淡出。

但是，当我按下另一个评论回答按钮时，你已经可以看到问题了。一个编辑器会滑动并淡出，而您按下评论答案按钮的评论编辑器会滑动并淡入。这就是我在这里试图解决的问题。

我需要彼此独立地控制幻灯片淡入和幻灯片淡出，以便当前编辑器没有幻灯片淡出动画，并且我按下的评论编辑器没有幻灯片淡出动画接听按钮。

当用户点击其他地方时，动画应该像往常一样。

这是一个工作示例：单击！

我感谢任何形式的帮助！ 亲切的问候

Answer 1

因为您愿意根据 JS 钩子的条件进行条件转换，这样您就可以在页面底部打开编辑器时仔细检查是否应该进行转换。

或者，你可以有类似的东西

<transition :name="transitionName === 'slide-fade'">

其中

transitionName

是

computed

检查编辑器是否打开。
打开时设置为

false

，否则设置为

'slide-fade'

。这是一种快速简单的方法，可以让 CSS 短路并在特定时刻禁用任何类型的动画。

否则，也许您可以检查是否有更高层的

<transition-group>

包装您的迭代

v-for

，该迭代将在特定条件下触发。我的意思是，您可以从底部取消与编辑器的

util-quill

的关联。这两个可以完全独立，但仍然可以做出反应，而不需要编辑器的持续

v-if

。

您还可以将答案存储到 Pinia 对象中的某个位置，然后将整个有效负载提交到后端。您本身不需要拥有多个带有自己文本的编辑器实例，您可以在其中写入，在转到其他问题时将其转储到对象中等。我知道这个解决方案可能需要更多修改，但是总的来说，这可能是一个不错的方法（很抱歉，如果这不是您希望解决问题的方式，哈哈）。