Question

我有3个组件，我想在进入/离开时显示过渡效果。

当您按下相关按钮时，会出现1个“主”组件，另外2个组件会出现。我目前的示例代码位于：https://jsfiddle.net/5aq1k05L/

<transition :name="'step_' + currentView" mode="out-in">
  <component :is="currentView"></component>
</transition>

CSS：

.step_componentA-enter-active {
  transition: transform 0.4s;
}

.step_componentA-leave-active {
  transition: transform 0s;
}

.step_componentA-enter {
  transform: translateX(-100%);
}

.step_mainComponent-leave-active {
  transition: transform 0.3s;
}

.step_mainComponent-leave-to {
  transform: translateX(-100%);
}

.step_componentB-enter-active {
  transition: transform 0.4s;
}

.step_componentB-leave-active {
  transition: transform 0s;
}

.step_componentB-enter {
  transform: translateX(100%);
}

我要做的是：

当我点击“componentA”按钮时，我希望该组件从左侧滑动，而“mainComponent”在转换过程中仍然可以在背景中看到（不会像现在那样被剥离）。

“componentB”也是如此，但它会从右侧滑动，而在单击时会向右滑动。

我错过了什么？ https://jsfiddle.net/5aq1k05L/

Answer 1

编辑2：

这是一个componentA和componentB滑过mainComponent - ＆gt;的工作示例https://jsfiddle.net/5aq1k05L/8/

我将转换更改为mode:in-out，我为每个组件添加了z-index，并将组件放在position:absolute中，将应用放在position:relative

中

修改：

这是一个适用于您案例的工作示例 - ＆gt; https://jsfiddle.net/5aq1k05L/4/

当您逐步分析脚本时，您会看到componentB离开时的类step_mainComponent-leave-active step_mainComponent-leave-to表示相对于mainComponent样式进行经典切换。

如果你想使用不同的动画，你应该使用enter-active-class和leave-active-class等（请参阅更多here） - 或者在name中添加两个变量，我猜，相对于上一个视图具有动态值，在currentView这样的商店中是。

可能是这样的：

<transition
    :name="'step_' + currentView + '_from_' + prevView" 
    mode="out-in"
  >

在商店中（你还需要更新状态，mapState等等）：

SET_CURRENT_VIEW(state, new_currentView) {
  state.prevView = state.currentView;
  state.currentView = new_currentView;
}

希望它会帮助你

如何自定义每个组件的转换？

1 个答案: