Vue 페이지 전환 애니메이션 구현 및 일반 애니메이션 효과
Vue는 데이터 기반 접근 방식을 사용하여 개발자가 강력한 상호 작용과 아름다운 데이터 표현을 갖춘 단일 페이지 웹 애플리케이션을 구축할 수 있도록 지원하는 인기 있는 JavaScript 프레임워크입니다. Vue에는 유용한 기능이 많이 내장되어 있으며 그 중 하나가 페이지 전환 애니메이션입니다. 이 글에서는 Vue의 전환 애니메이션 기능을 사용하는 방법을 소개하고 가장 일반적인 애니메이션 효과에 대해 논의합니다.
Vue 페이지 전환 애니메이션 구현
Vue의 페이지 전환 애니메이션은 Vue의 <transition>
및 <transition-group>
구성 요소를 통해 구현됩니다. 아래에서는 이 두 가지 구성 요소를 각각 소개합니다. <transition>
与<transition-group>
组件实现的。下面我们分别介绍这两个组件。
<transition>
<transition>
组件可以在被包裹的元素在插入、更新或者移除时,自动执行过渡动画效果。
该组件向外部发出before-enter
、enter
、after-enter
、enter-cancelled
和before-leave
、leave
、after-leave
、leave-cancelled
等钩子函数,让我们可以控制过渡的开始、结束和取消。
下面是一个简单的<transition>
动画效果,展示了一个元素在插入时的过渡动画。请注意,该组件需要一个name
属性,用于指定动画的名称。在下面的例子中,动画名称是fade
。这里的CSS样式定义了开始和结束时元素的过渡动画效果。
<template> <div> <button @click="show = !show">Toggle show</button> <transition name="fade"> <div v-if="show">Hello Vue!</div> </transition> </div> </template> <script> export default { data() { return { show: true, }; }, }; </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>
<transition-group>
<transition-group>
组件与<transition>
很相似,但是它适用于列表项或者表格等需要同时进行插入和移除的元素。
与<transition>
组件一样,在<transition-group>
组件中可以定义钩子函数,如before-enter
、enter
等。
<transition-group>
需要指定一个tag
属性,用于指定过渡组件生成的HTML标签类型。它还需要每个子元素带有一个唯一的键值,使Vue可以正确地识别插入、更新或者移除的元素。
在下面的例子中,我们展示了一个简单的列表,每当点击按钮时,都会添加或者删除一项。在这个例子中,我们使用了<transition-group>
组件,并且指定了HTML标签类型为ul
。列表中的每个项都带有一个键值,以帮助Vue正确地执行过渡动画。
<template> <div> <button @click="shift()">Add/Remove Item</button> <transition-group name="list" tag="ul"> <li v-for="item in items" :key="item">{{ item }}</li> </transition-group> </div> </template> <script> export default { data() { return { items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"], }; }, methods: { shift() { if (this.items.length > 0) { this.items.shift(); } else { this.items.push("New Item"); } }, }, }; </script> <style> .list-enter-active, .list-leave-active { transition: all 0.5s; } .list-enter, .list-leave-to { opacity: 0; transform: translateY(30px); } </style>
常用的过渡动画效果
现在,我们已经介绍了如何使用Vue的过渡动画。下面让我们来看看一些常见的过渡动画效果。
Fade
Fade
效果用于渐隐或者渐显的效果。它将元素的不透明度从0变化到1或者从1变化到0。
<transition name="fade"> <div v-if="show">Hello Vue!</div> </transition> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>
Slide
Slide
效果用于元素从一侧滑出或者滑动到一侧的效果。它将元素的位置从一个位置移动到另一个位置。
<transition name="slide"> <div v-if="show">Hello Vue!</div> </transition> <style> .slide-enter-active, .slide-leave-active { transition: transform 0.5s; } .slide-enter-to, .slide-leave { transform: translateX(100%); } .slide-enter, .slide-leave-to { transform: translateX(-100%); } </style>
Scale
Scale
效果用于元素从小到大或者从大到小的缩放效果。它将元素的宽度和高度从一种大小缩小到另一种大小。
<template> <div> <button @click="show = !show">Toggle show</button> <transition name="scale"> <div v-if="show" class="box"></div> </transition> </div> </template> <style> .box { width: 100px; height: 100px; background-color: red; } .scale-enter-active, .scale-leave-active { transition: transform 0.5s; } .scale-enter, .scale-leave-to { transform: scale(0); } </style>
Rotate
Rotate
效果用于元素绕着一个轴旋转的效果。它将元素绕着一个角度旋转。
<template> <div> <button @click="show = !show">Toggle show</button> <transition name="rotate"> <div v-if="show" class="box"></div> </transition> </div> </template> <style> .box { width: 100px; height: 100px; background-color: red; } .rotate-enter-active, .rotate-leave-active { transition: transform 0.5s; } .rotate-enter, .rotate-leave-to { transform: rotate(180deg); } </style>
总结
Vue的过渡动画功能可以让我们在页面元素插入、更新或者移除时,添加动画过渡效果,从而使页面更加生动和有趣。本文介绍了如何使用Vue的<transition>
和<transition-group>
<transition>
<transition>
구성 요소는 래핑된 요소가 삽입, 업데이트 또는 제거될 때 자동으로 전환 애니메이션 효과를 수행할 수 있습니다. 🎜🎜이 구성 요소는 입력 전
, 입력
, 입력 후
, 입력 취소
및 before-leave, leave
, after-leave
, leave-cancelled
와 같은 코드를 사용하면 전환 시작을 제어할 수 있습니다. 종료하고 취소하세요. 🎜🎜다음은 삽입 시 요소의 전환 애니메이션을 보여주는 간단한 <transition>
애니메이션 효과입니다. 이 구성요소에는 애니메이션 이름을 지정하기 위한 name
속성이 필요합니다. 아래 예에서 애니메이션 이름은 fade
입니다. 여기의 CSS 스타일은 시작과 끝에서 요소의 전환 애니메이션 효과를 정의합니다. 🎜rrreee<transition-group>
🎜<transition-group>
구성 요소는 <transition>
과 매우 유사하지만 다음과 같이 작동합니다. 동시에 삽입하고 제거해야 하는 항목이나 테이블과 같은 요소를 나열합니다. 🎜🎜<transition>
구성 요소와 마찬가지로 before-enter
와 같은 <transition-group>
구성 요소에서 후크 기능을 정의할 수 있습니다. 코드>, 입력
등. 🎜🎜<transition-group>
는 전환 구성 요소에서 생성된 HTML 태그 유형을 지정하기 위해 tag
속성을 지정해야 합니다. 또한 Vue가 삽입, 업데이트 또는 제거된 요소를 올바르게 식별할 수 있도록 각 하위 요소에는 고유한 키 값이 있어야 합니다. 🎜🎜아래 예에서는 버튼을 클릭할 때마다 항목을 추가하거나 제거하는 간단한 목록을 보여줍니다. 이 예에서는 <transition-group>
구성 요소를 사용하고 HTML 태그 유형을 ul
로 지정합니다. 목록의 각 항목에는 Vue가 전환 애니메이션을 올바르게 수행하는 데 도움이 되는 키 값이 함께 제공됩니다. 🎜rrreee🎜일반적으로 사용되는 전환 애니메이션 효과🎜🎜이제 Vue의 전환 애니메이션 사용법을 소개했습니다. 몇 가지 일반적인 전환 애니메이션 효과를 살펴보겠습니다. 🎜페이드
🎜페이드
효과는 페이드 아웃하거나 페이드 아웃하는 데 사용됩니다. 요소의 불투명도를 0에서 1로 또는 1에서 0으로 변경합니다. 🎜rrreee슬라이드
🎜슬라이드
효과는 요소가 슬라이드 아웃되거나 한쪽으로 슬라이드되는 데 사용됩니다. 요소의 위치를 한 위치에서 다른 위치로 이동합니다. 🎜rrreeeScale
🎜Scale
효과는 요소를 작은 것에서 큰 것으로 또는 큰 것에서 작은 것으로 크기를 조정하는 데 사용됩니다. 요소의 너비와 높이를 한 크기에서 다른 크기로 축소합니다. 🎜rrreee회전
🎜회전
효과는 축을 중심으로 요소를 회전하는 데 사용됩니다. 요소를 각도로 회전시킵니다. 🎜rrreee🎜Summary🎜🎜Vue의 전환 애니메이션 기능을 사용하면 페이지 요소가 삽입, 업데이트 또는 제거될 때 애니메이션 전환 효과를 추가하여 페이지를 더욱 생생하고 흥미롭게 만들 수 있습니다. 이 글에서는 Vue의 <transition>
및 <transition-group>
구성요소를 사용하여 전환 애니메이션을 구현하는 방법을 소개합니다. 또한 일반적으로 사용되는 몇 가지 전환 애니메이션 효과도 소개합니다. Vue 애플리케이션에 애니메이션 효과를 추가해야 하는 경우 다음 구성 요소를 사용해 볼 수 있습니다. 🎜위 내용은 Vue 페이지 전환 애니메이션 구현 및 일반 애니메이션 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.

vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.

VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 관리하고 유지 관리 할 수 있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.

vue.js에서 JS 파일을 참조하는 세 가지 방법이 있습니다. & lt; script & gt; 꼬리표;; mounted () 라이프 사이클 후크를 사용한 동적 가져 오기; Vuex State Management Library를 통해 수입.

vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.

VUE에서 DIV 요소를 점프하는 두 가지 방법이 있습니다. VUE 라우터를 사용하고 라우터 링크 구성 요소를 추가하십시오. @Click 이벤트 리스너를 추가하고 이것을 호출하십시오. $ router.push () 메소드를 점프하십시오.

vue.js가 트래버스 어레이 및 객체에 대한 세 가지 일반적인 방법이 있습니다. V- 결합 지시문은 V-FOR와 함께 사용하여 각 요소의 속성 값을 동적으로 설정할 수 있습니다. .MAP 메소드는 배열 요소를 새 배열로 변환 할 수 있습니다.
