Vue를 사용하여 CSS 전환 효과를 구현하는 방법

이 글은 주로 웹 프론트엔드 Vue의 CSS 전환 효과 예시를 소개하고 있으니 참고용으로 올려보겠습니다.

상호작용 경험에서 전환 효과의 중요성은 자명합니다. 과거에는 js 또는 Jquery를 사용하여 CSS에 정의된 스타일과 결합된 요소 클래스를 추가하거나 제거했으며 일부 자바스크립트 라이브러리를 참조한 후 매우 복잡하고 놀라운 동적 효과를 만들 수 있었습니다. 그러나 이 방법도 여전히 그렇습니다. 번거롭다.

vue.js에는 요소가 DOM에 삽입되거나 제거될 때 자동으로 전환 효과를 적용할 수 있는 전환 시스템이 내장되어 있습니다. Vue는 적시에 CSS 전환 또는 애니메이션을 트리거하며 전환 프로세스 중에 사용자 정의 DOM 작업을 수행하기 위해 해당 자바스크립트 후크 기능을 제공할 수도 있습니다.

모든 전환 효과는 대상 요소의 전환 속성을 사용해야 합니다.

<p v-if="show" transition="my-style">显示</p>

transition의 기능은 다음 지침과 함께 사용할 수 있습니다.

1.v-if 2.v-show 3.v-for 4. 동적 구성 요소

다른 지침이나 리소스를 찾을 수 있습니다. 스스로 .

전체 코드 예제는 다음과 같습니다.

<p v-if="show" :transition="expand"></p>  // expand必需事先定义好，expand后面写样式要用（关键）
<transition name="expand"><p v-if="show">显示</p></transition>这样的嵌套也可以

.expand-transition { // 必需写
 transition: all .3s ease; 
 height: 30px; 
 padding: 10px;
 background-color: #eee;
 overflow: hidden;
}

.expand-enter{ //开始进入过渡，元素被插入生效
 transition:opacity .5s;
} 
.fade-leave-active { // 结束状态
 opacity:0;
}

물론 시작과 종료 상태가 실제로는 입력/나가기 상태를 전환하는 4개의(CSS 클래스) 이름이 있습니다.

1.v-enter: 전환 시작 시작 상태를 정의하고 요소가 삽입될 때 적용되며 다음 프레임에서 제거됩니다.

2.v-enter-active: 전환 시작 종료 상태를 정의합니다. , 요소 삽입 시 적용됩니다. 전환/애니메이션이 완료되면 적용되고, 전환/애니메이션이 완료된 후에는 제거됩니다.

3.v-leave: 나가기 전환의 시작 상태를 정의합니다. 이탈 전환이 트리거되고 다음 프레임에서 제거될 때

4.v-leave-active: 정의 이탈 전환의 시작 상태는 이탈 전환이 트리거될 때 적용되며 다음 프레임에서 제거됩니다. 위의 4가지 상태를 바탕으로 창 왼쪽에서 페이지가 들어가는 등 CSS 전환 효과를 완벽하게 작성할 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

element-ui를 구축하는 방법(자세한 튜토리얼)

Angular에서 ng-alain을 기반으로 자신만의 선택 구성 요소를 정의하는 방법은 무엇입니까?

elementui에서 기본 스타일 수정을 구현하는 방법

Vue에서 elementUI를 사용하여 사용자 정의 테마 메서드 구현

plotly.js 드로잉 라이브러리 사용 튜토리얼의 자세한 해석(자세한 튜토리얼)

in elementui 방법 의 기본 스타일을 수정하려면?

위 내용은 Vue를 사용하여 CSS 전환 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!