vue 输入转换无法正常工作

Posted 2023-02-22

【中文标题】vue 输入转换无法正常工作

【英文标题】：vue enter transition not working properly

【发布时间】：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 属性。希望它可以帮助其他有这个问题的人！

【参考方案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);
;