如何为每个组件自定义过渡？

Question

我有 3 个组件，我想在它们 enter/leave 时显示过渡效果。

有 1 个 "main" 组件，当您按下相关按钮时会显示另外 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 上滑动 -> https://jsfiddle.net/5aq1k05L/8/

我将过渡更改为mode:in-out，我为每个组件添加了一个z-index，并将组件放在position:absolute中，将应用程序放在position:relative[=29中=]

编辑：

这里有一个适用于您的案例的示例 -> https://jsfiddle.net/5aq1k05L/4/

当您逐步分析脚本时，您会看到 componentB 离开时的 class 是 step_mainComponent-leave-active step_mainComponent-leave-to，它使 classic 切换相对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;
}

希望对你有所帮助

如何为每个组件自定义过渡？

How to custom transition for each component?

css

vue.js

vuejs2

css-transitions

vuejs-transition