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

Posted 2023-02-22

【中文标题】如何为每个组件自定义过渡？

【英文标题】：How to custom transition for each component?

【发布时间】：2018-07-05 06:24:27

【问题描述】：

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

【问题讨论】：

@tony19 确实如此。我已经更新了帖子。谢谢！

【参考方案1】：

编辑 2：

这是一个工作示例，其中 componentA 和 componentB 在 mainComponent 上滑动 -> https://jsfiddle.net/5aq1k05L/8/

我把transition改成mode:in-out，给每个组件加了z-index，把组件放在position:absolute，app放在position:relative

---

编辑：

这是您案例的工作示例 -> 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;

希望对你有帮助

【讨论】：

感谢您的回复，但我不确定我是否理解。我想我可以看到这对从不同方向滑动有什么帮助，但是前一个组件在被移除之前“丢失”它的元素怎么样？

这个概念是使每个 prev 组件的 :leave-active-class 不同，因为在您的情况下，step_mainComponent 是产生切换效果的“空闲”类，我的意思是 transform: translateX(-100%); 翻译只在左边，不在右边。你没有完全理解什么？

我认为理解了这个概念并添加了previousView状态，但是当从componentB和componentA触发并保持背景时，我仍然无法显示不同的动画

@Cornwell，我也这样做了，看例子

@Cornwell 你看到这个例子了吗？它可以按您的意愿工作:-)