Vue js: 첫 페이지 로드에서만 css 애니메이션을 로드하는 방법

Vue js: 첫 페이지 로드에서만 css 애니메이션을 로드하는 방법

홈 페이지 구성 요소에는<div>다음과 같은 애니메이션 요소:

<div class="square">
   //content
</div>

그리고 CSS에서:

.square
height: 200px
width: 200px
margin: 0 auto
z-index: 0
position: absolute
top: 38vh
left: 43vw
margin-left:auto
margin-right:auto
animation-name: stretch
animation-duration: 0.3s
animation-timing-function: ease-out
animation-delay: 0
animation-direction: alternate
animation-fill-mode: forwards
animation-play-state: running

@keyframes stretch
from
  transform: scale (1)
to
  transform: scale(1.8)

그것은 다른 몇몇과 함께 자라는 단순한 사각형이다.<div>내부의 요소

이제는 (지금 작동 중인 것처럼) 보기가 나타날 때마다가 아니라, 초기 로그인이나 앱 오픈 때만 애니메이션을 재생하고 싶다.

좀 도와 주시겠습니까?제발, 아무것도 당연하게 여기지 마, 난 초보자니까.미리 고맙다.

그것은 간단하다. vue 속성의 데이터에 깃발을 생성한다.라고 불러도 좋다animate. 로그인 후 꺼지는 기능을 다음과 같이 추가한다.

data:{
   animate:true
   },
methods:{
   turnOffAnimate:{
      this.animate=false;
   }
}

애니메이션을 끄려면 애니메이션을 끄십시오.이제 html div에서 다음과 같이 클래스를 바인딩하십시오.

<div :class="{square : animate}">
   //content
</div>

이 조건은 당신의 div가 소유할 것이라는 것을 의미한다.square오직 수업하는 동안만 수업하다.animate국기는 참이다.당신은 vue에서 수업 바인딩에 대해 더 많이 읽을 수 있다.

참조URL: https://stackoverflow.com/questions/53391894/vue-js-how-to-load-a-css-animation-only-on-the-first-page-load