vue Enter 전환이 제대로 작동하지 않음

vue Enter 전환이 제대로 작동하지 않음

저는 엔트리와 탈퇴 애니메이션을 사용하여 컴포넌트를 렌더링해야 하는 프로젝트를 진행하고 있습니다.컴포넌트가 화면에 들어오면 아래쪽에서 들어가야 합니다.컴포넌트 태그의 :is 속성을 변경하면 현재 컴포넌트가 위로 올라가고 다음 컴포넌트가 위로 올라갑니다.e는 밑에서부터 시작되며 코드는 다음과 같습니다.

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

그러나 실제 동작은 첫 번째 구성요소는 위로 올라가지만 두 번째 구성요소는 애니메이션 없이 바로 나타납니다.

한 번에 하나씩 렌더링하면(하나를 파괴하지 않고 다른 하나를 같은 동작으로 렌더링하면) 모든 것이 완벽하게 작동합니다.나는 무슨 일이 일어나고 있는지 모른다.

CSS에 몇 가지 문제가 있습니다.

CSS 이행 및 CSS 애니메이션

이행은 CSS Transitions 또는 CSS Animations 중 하나를 사용하여 구현할 수 있습니다.이 경우 CSS는 두 가지 개념을 잘못 혼합합니다.

특히,slideIn키 프레임과.section-enter/.section-enter-to규칙은 이동과 같은 작업을 효과적으로 수행하고 있습니다..section시야에 들어오다단, 이 경우 변경 내용을 애니메이션화하는 데 필요한 시간이 0이 아닌 규칙이 누락되므로 변경이 즉시 이루어집니다.같은 문제가 에 존재합니다.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 Transition이 작동합니다.

데모 1

CSS 애니메이션 사용

또는 CSS 애니메이션을 사용하여 키 프레임을 사용할 수도 있습니다.이 경우 애니메이션은 다음 사용자만 적용할 수 있습니다.*-active규칙 및 아니요*-enter/*-leave규칙이 사용됩니다.질문에는 불필요한 따옴표가 포함되어 있습니다.이것은 잘못된 구문이며 무시됩니다(애니메이션은 발생하지 않습니다). 다음 스니펫()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;
  }
}

데모 2

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%);
}

데모 3

믹스인 사용

설명 감사합니다 @tony19
논리를 쉽게 반복할 수 있도록 믹스인을 사용해 주세요.
슬라이드인 및 슬라이드출력은 리버스 기능을 사용하여 조합할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/54260310/vue-enter-transition-not-working-properly