vue 输入转换无法正常工作 [英] vue enter transition not working properly
问题描述
我正在做一个项目，我必须用进入和离开动画渲染一些组件，当一个组件进入屏幕时，它必须从底部进入，当它离开时，它必须向上移动，期望的行为是，当我更改组件标签的 :is 属性时，当前组件向上，下一个从底部出现，代码如下所示:
<div class="home"><transition name="section"><component :is="activeSection"></component></模板><脚本>从 './comp1' 导入 comp1；从 './comp2' 导入 comp2；导出默认{成分: {比较1，合成2},数据() {活动部分:'comp1'}<样式范围>.section-输入{顶部:100vh；}.section-enter-to {顶部:0vh；}.section-enter-active {动画名称:'slideIn';动画持续时间:1s；}.section-离开{顶部:0vh；}.section-leave-active {动画名称:'slideOut';动画持续时间:1s；}.section-leave-to {顶部:-100vh；}@关键帧幻灯片{从 {顶部:100vh；}到 {顶部:0}}@关键帧滑出{从 {顶部:0vh；}到 {顶部:-100vh；}}</风格>
但实际行为是第一个组件向上移动，但第二个组件在没有动画后立即出现.
如果我一次渲染一个(不是破坏一个并用相同的动作渲染另一个)一切正常.我不知道发生了什么.
您的 CSS 存在一些问题.
CSS 过渡和 CSS 动画
可以使用任一CSS 实现过渡过渡 或 CSS 动画.在这种情况下，您的 CSS 错误地混合了这两个概念.
特别是，slideIn 关键帧和 .section-enter/.section-enter-to 规则有效地执行相同的任务将 .section 移动到视图中.但是，这缺少 transition 具有非零时间的规则，需要对更改进行动画处理，因此更改会立即发生.slideOut 关键帧和 leave 规则也存在同样的问题.
.section-enter {顶部:100vh；}.section-enter-to {顶部:0；}.section-enter-active {过渡:.5s；/* 缺少规则 */}.section-离开{顶部:0；}.section-leave-to {顶部:-100vh；}.section-leave-active {过渡:.5s；/* 缺少规则 */}删除关键帧，并添加缺失的规则(如上所示)将导致有效的 CSS 过渡.
使用 CSS 动画
或者，您可以将关键帧与 CSS 动画一起使用，其中动画仅通过 *-active 规则应用，而没有 *-enter/*-leave 规则被使用.请注意，您的问题在 animation-name: 'slideIn'; 中包含不必要的引号，这是无效的语法，将被静默忽略(不发生动画).我在以下代码段中使用了更简单的速记 (animation: slideIn 1s;).
.section-enter-active {动画:滑动1s；}.section-leave-active {动画:slideOut 1s；}@关键帧幻灯片{从 {顶部:100vh；}到 {顶部:0；}}@关键帧滑出{从 {顶部:0；}到 {顶部:-100vh；}}优化 CSS 过渡
您也可以使用<调整动画性能code>translateY 而不是转换 top.
/* top .wrapper 中最初为 0 */.section-leave-active,.section-enter-active {过渡:.5s；}.section-输入{变换:translateY(100%);}.section-leave-to {变换:translateY(-100%);}i'm working on a project where i have to render some components with an enter and leave animation, when a component enters the screen it has to enter form the bottom, and when it leaves, it has to do it going upwards, the desired behavior is that when i change the :is property of the component tag, the current component goes upwards and the next one comes from the bottom, the code looks like this:
<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>
but the actual behavior is that the first component goes upwards but the second appears inmediatly after without animation.
if i render one at a time (not destructing one and rendering another with the same action) everything works perfectly. I dont know what is happening.
There are a few problems in your CSS.
CSS Transitions and CSS Animations
A transition can be implemented using either CSS Transitions or CSS Animations. Your CSS incorrectly mixes the two concepts in this case.
In particular, the slideIn keyframes and .section-enter/.section-enter-to rules are effectively performing the same task of moving .section into view. However, this is missing a transition rule with a non-zero time, required to animate the change, so the change occurs immediately. The same issue exists for the slideOut keyframes and leave rules.
.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 */
}
Removing the keyframes, and adding the missing rules (as shown above) would result in a working CSS Transition.
Using CSS Animations
Alternatively, you could use keyframes with CSS Animations, where the animation is applied only by the *-active rules, and no *-enter/*-leave rules are used. Note your question contained unnecessary quotes in animation-name: 'slideIn';, which is invalid syntax and would be silently ignored (no animation occurs). I use a simpler shorthand in the following snippet (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;
}
}
Optimizing CSS Transitions
You could also tweak your animation performance by using translateY instead of transitioning 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%);
}
这篇关于vue 输入转换无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
