Javascript vue输入转换无法正常工作

我正在做一个项目，在这个项目中，我必须使用enter和leave动画渲染一些组件，当组件进入屏幕时，它必须从底部进入，当它离开时，它必须向上进行，所需的行为是，当我更改组件标记的：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>

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

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

从“/comp1”导入comp1；
从“/comp2”导入comp2；
导出默认值{
组成部分：{
comp1，
comp2
},
数据（）{
activeSection:“组件1”
}
.输入部分{
顶部：100vh；
}
.输入至{
顶部：0vh；
}
.部分输入活动{
动画名称：“slideIn”；
动画持续时间：1s；
}
.假期{
顶部：0vh；
}
.保持活动状态{
动画名称：“滑出”；
动画持续时间：1s；
}
.部门请假至{
顶部：-100vh；
}
@关键帧幻灯片{
从{
顶部：100vh；
}
到{
排名：0
}
}
@关键帧滑出{
从{
顶部：0vh；
}
到{
顶部：-100vh；
}
}

但实际情况是，第一个组件向上移动，但第二个组件在没有动画的情况下出现在中间位置

---

如果我一次渲染一个（而不是破坏一个并用相同的动作渲染另一个），一切都会完美工作。我不知道发生了什么。

您的CSS中有一些问题

CSS转换和CSS动画 转换可以使用或实现。在本例中，CSS错误地混合了这两个概念

特别是，

滑动条

关键帧和

.section enter

/

.section enter to

规则有效地执行了将

.section

移动到视图中的相同任务。但是，这缺少了一个非零时间的规则，需要设置更改动画，因此更改会立即发生。同样的问题也存在对于

滑出

关键帧和

离开

规则

.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转换正常工作

使用CSS动画 或者，您可以将关键帧与CSS动画一起使用，其中动画仅由

*-active

规则应用，并且不使用

*-enter

/

*-leave

规则。请注意，您的问题在

动画名称中包含不必要的引号：“slideIn”；

，这是无效语法，将被默默忽略（没有动画出现）。我在下面的代码片段中使用了一个更简单的速记（

动画：slidein1s；

）

优化CSS转换 您还可以使用而不是转换

top

/* top initially 0 in .wrapper */

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

使用混合器 谢谢你的解释
请为此使用mixin，以便可以轻松地重复逻辑。
此外，您的slideIn和slideOut也可以通过使用reverse进行组合：

@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 
        }
    }
}

像这样使用它：

<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>

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

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

就像这样：

<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>

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

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

---

你能不能把这个放在像codesandbox这样的地方，这样更容易重新创建和查看？