Vuejs 전환 애니메이션을 구현하는 방법-JS 튜토리얼-php.cn

Vuejs 전환 애니메이션을 구현하는 방법

清浅

풀어 주다： 2019-01-22 11:28:40

원래의

3563명이 탐색했습니다.

전환 애니메이션은 vuejs의 전환 요소를 통해 달성할 수 있습니다. 여기에는 전환 전환을 각각 처리하기 위해 태그에 적용할 수 있는 6개의 클래스가 있습니다.

VueJS(Vue.js)는 매우 좋은 프런트엔드라고 할 수 있습니다. 자바스크립트 프레임워크. 우리의 필요에 맞게 사용, 확장 및 사용자 정의가 쉽습니다. 특히 vue.js의 전환 기능은 애니메이션 프로세스를 쉽게 만듭니다. 다음 기사에서는 vue.js 전환 애니메이션을 구현하는 방법을 자세히 소개하겠습니다. 특정 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다

Vuejs 전환 애니메이션을 구현하는 방법

[추천 과정: vue.js 튜토리얼]

Vue.js에는 요소가 있습니다. 요소 또는 구성 요소에 대한 JavaScript 애니메이션, CSS 애니메이션 및 CSS 전환을 쉽게 처리합니다.

CSS 전환의 경우 요소는 클래스 적용 및 적용 취소를 담당합니다. 우리가 해야 할 일은 전환 중에 요소가 어떻게 보일지 정의하는 것뿐입니다.

구문은 다음과 같습니다.

<transition name = "nameoftransition">
   <div></div>
</transition>

로그인 후 복사

전환 요소는 각각 시작 및 종료 전환을 처리하는 데 사용할 수 있는 6개의 클래스를 마크업에 적용합니다. . 요소가 표시될 때 A에서 B로의 변환을 처리하는 세 가지 클래스와 요소가 제거될 때 A에서 B로의 변환을 처리하는 세 가지 클래스가 있습니다.

구성 요소가 활성화되거나 표시될 때 입력 전환이 발생합니다: v-enter, v-enter-active, v-enter-to

v-enter: 전환의 시작 상태로 들어가는 것을 나타냅니다. 요소가 삽입된 후 다음 프레임에서 제거됩니다.

v-enter-active: 전환이 적용되는 상태를 나타내며, 애니메이션이 완료된 후 제거됩니다.

v-enter-to: 전환의 종료 상태로 들어갑니다. 애니메이션이 완료된 후 제거

Leave 전환은 구성 요소가 비활성화되거나 제거될 때입니다: v-leave, v-leave-active 및 v-leave-to

v-leave: 떠나기의 시작 상태를 나타냅니다.

v-leave-active 제외: 탈퇴 전환이 적용되는 상태를 나타내며 전체 탈퇴 전환 단계 동안 적용되며 전환/애니메이션이 완료된 후 제거됩니다. 이 클래스는 이탈 전환의 처리 시간, 지연 및 곡선 기능을 정의하는 데 사용할 수 있습니다

v-leave-to: 이탈 전환의 최종 상태를 나타내며 전환/애니메이션이 완료된 후 제거됩니다

Vuejs 전환 애니메이션을 구현하는 방법

예 :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<script src="https://vuejs.org/js/vue.js"></script>

<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .5s ease;
}
.slide-fade-leave-active {
  transition: all 3s linear;
  font-size:30px;
  background-color: pink;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
  transform: translateX(40px);
  opacity:0.2;
}
</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition name="slide-fade">
    <p v-if="show">php中文网</p><!-- 为true就显示，不是true就不显示 -->
</transition>
</div>
<script type = "text/javascript">
new Vue({
    el: &#39;#databinding&#39;,
    data: {
        show: true
    }
})
</script>
</body>
</html>

로그인 후 복사

렌더링:

Vuejs 전환 애니메이션을 구현하는 방법