1

我有 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/

4

1 回答 1

0

编辑2:

这是一个工作示例,其中componentAandcomponentB正在滑动mainComponent-> https://jsfiddle.net/5aq1k05L/8/

我将过渡更改为mode:in-out,我z-index为每个组件添加了一个,并将组件放入position:absolute并将应用程序放入position:relative


编辑:

这是您案例的工作示例-> https://jsfiddle.net/5aq1k05L/4/


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

如果你想使用不同的动画,你应该使用enter-active-class等(在这里leave-active-class查看更多) - 或者在商店中放入两个变量,我猜,相对于前一个视图具有动态值,就像在商店中一样。namecurrentView

它可能是这样的:

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

在商店中(您还需要更新状态、mapState 等):

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

希望它会帮助你

于 2018-01-25T23:15:12.383 回答