【问题标题】：vue enter transition not working properlyvue 输入转换无法正常工作
【发布时间】：2019-06-13 02:13:09
【问题描述】：

我正在做一个项目，我必须渲染一些带有进入和离开动画的组件，当一个组件进入屏幕时，它必须从底部进入，当它离开时，它必须向上移动，期望的行为是，当我更改组件标签的 :is 属性时，当前组件向上，下一个从底部开始，代码如下所示：

<template>
  <div class="home">
    <transition name="section">
      <component :is="activeSection"></component>
    </transition>
  </div>
</template>

<script>
import comp1 from './comp1';
import comp2 from './comp2';

export default {
  components: {
    comp1,
    comp2
  },
  data() {
    activeSection: 'comp1'
  }
</script>

<style scoped>
  .section-enter {
    top: 100vh;
  }
  .section-enter-to {
    top: 0vh;
  }
  .section-enter-active {
    animation-name: 'slideIn';
    animation-duration: 1s;
  }
  .section-leave {
    top: 0vh;
  }
  .section-leave-active {
    animation-name: 'slideOut';
    animation-duration: 1s;
  }
  .section-leave-to {
    top: -100vh;
  }


  @keyframes slideIn {
    from {
      top: 100vh;
    }
    to {
      top: 0
    }
  }

  @keyframes slideOut {
    from {
      top: 0vh;
    }
    to {
      top: -100vh;
    }
  }
</style>

但实际行为是第一个组件向上，但第二个组件在没有动画的情况下立即出现。

如果我一次渲染一个（不破坏一个并用相同的动作渲染另一个）一切都很好。我不知道发生了什么。

【问题讨论】：

你能不能把它放在codesandbox之类的地方，这样更容易重新创建和查看？
嘿，在我的例子中，我只需要在我的转换中添加一个appear 属性。希望它可以帮助其他有这个问题的人！

标签： javascript css animation vue.js vuejs2

【解决方案1】：

您的 CSS 存在一些问题。

CSS 过渡和 CSS 动画

可以使用 either CSS Transitions 或 CSS Animations 实现转换。在这种情况下，您的 CSS 错误地混合了这两个概念。

特别是，slideIn 关键帧和.section-enter/.section-enter-to 规则有效地执行了将.section 移动到视图中的相同任务。但是，这缺少具有非零时间的 transition 规则，需要为更改设置动画，因此更改会立即发生。 slideOut 关键帧和 leave 规则也存在同样的问题。

.section-enter {
  top: 100vh;
}
.section-enter-to {
  top: 0;
}
.section-enter-active {
  transition: .5s; /* MISSING RULE */
}

.section-leave {
  top: 0;
}
.section-leave-to {
  top: -100vh;
}
.section-leave-active {
  transition: .5s; /* MISSING RULE */
}

删除关键帧并添加缺少的规则（如上所示）将导致 CSS 转换正常工作。

demo 1

使用 CSS 动画

或者，您可以将关键帧与 CSS 动画一起使用，其中动画仅由 *-active 规则应用，不使用 *-enter/*-leave 规则。请注意，您的问题在 animation-name: 'slideIn'; 中包含不必要的引号，这是无效的语法，将被静默忽略（不会出现动画）。我在下面的 sn-p (animation: slideIn 1s;) 中使用了更简单的速记。

.section-enter-active {
  animation: slideIn 1s;
}
.section-leave-active {
  animation: slideOut 1s;
}

@keyframes slideIn {
  from {
    top: 100vh;
  }
  to {
    top: 0;
  }
}
@keyframes slideOut {
  from {
    top: 0;
  }
  to {
    top: -100vh;
  }
}

demo 2

优化 CSS 过渡

您也可以通过使用translateY 而不是转换top 来tweak your animation performance。

/* top initially 0 in .wrapper */

.section-leave-active,
.section-enter-active {
  transition: .5s;
}
.section-enter {
  transform: translateY(100%);
}
.section-leave-to {
  transform: translateY(-100%);
}

demo 3

【讨论】：

【解决方案2】：

使用 Mixin

感谢@tony19的解释
请为此使用 mixin，以便可以轻松地重复逻辑。
此外，您的 slideIn 和 slideOut 可以使用反向组合：

@mixin animationmixin($type:'animation', $style:'', $duration:1s) {
    
    @keyframes #{$type}-#{$style} { // register animation
        0% { opacity: 1;  transform: none; } // reset style
        100% { @content; } // custom style
    }
    
    .#{$style} { // add '.section'
        &-enter-active, &-leave-active { // add '.section-enter-active', ...
            transition: #{$duration};
        }
        &-enter, &-leave-to {
            animation: #{$type}-#{$style} #{$duration}; // use animation
        }
        &-leave, &-enter-to {
            animation: #{$type}-#{$style} #{$duration} reverse; // use animation in reverse 
        }
    }
}

像这样使用它：

@include animationmixin($style:'section') { // set custom styling
    transform: translateY(100%);
};

像这样：

@include animationmixin($style:'fade') {
    opacity: 0;
    transform: scale(0.9);
};

【讨论】：