Vue 过渡不影响每个元素答案

【问题标题】：Vue Transition Not Affecting Each ElementVue 过渡不影响每个元素
【发布时间】：2017-01-31 12:36:39
【问题描述】：

我有一个包含两个元素的容器，我想通过单击来切换它们。

我希望在新元素滑入时让可见元素滑出，但过渡只影响第一个孩子（即徽标），而第二个孩子（即版本）进行简单的显示/隐藏。切换孩子的顺序没有帮助。

component.vue 中的标记

<div class="brand-container" @click="toggleLogoBox">
  <div class="logo" v-show="logoVisible" transition="slide">
    <img src="../assets/images/logo.svg">
  </div>
  <div class="version" v-show="versionVisible" transition="slide">
    <div class="label">Motor Club</div>
    <div class="number">{{ version }}</div>
  </div>
</div> <!-- brand-container -->

component.vue 中的逻辑

methods: {
  toggleLogoBox: function () {
    this.logoVisible = !this.logoVisible;
    this.versionVisible = !this.versionVisible;
  },
  // ...

过渡

.slide-transition {
  transition: all .4s cubic-bezier(.25,.1,.25,1);
}

.slide-enter {
  transform: translate3d(25%, 0, 0);
  opacity: 0;
}

.slide-leave {
  transform: translate3d(-25%, 0, 0);
  opacity: 0;
}

【问题讨论】：

你为什么省略了代码的 JS 部分？
我认为我的逻辑没有添加任何内容，但如果有帮助，我会将其包含在内。 Vue.js 提供了过渡。
嗯，我不确定我是否完全按照您的要求重新创建了，（我 99% 确定我没有：D）。 VueTransitionRecreation。但是过渡似乎没有问题。
啊！我忘记将position: absolute; 添加到容器内的元素中，因此在应用过渡时，由于overflow: hidden;，它们并不总是可见。

标签： html sass css-transitions vue.js

【解决方案1】：

事实证明，这不是过渡问题，而是不具有position: absolute; top: 0; left: 0; 属性的子元素的问题，因此可以从头到尾看到每个元素上的过渡。

【讨论】：