Vue3의 요소와 구성 요소 간에 애니메이션을 전환하는 방법
분석 예시
요소 간 애니메이션 전환
요소 간 애니메이션 전환은 두 개의 dom 요소 간 전환을 의미합니다. 예를 들어 div가 사라지고 다른 요소가 div가 표시됩니다. 소멸은 페이드 아웃 효과에 해당하고 표시는 페이드 인 효과에 해당합니다. 이 예에서는 두 개의 div를 사용하고 하나는 hello world, 다른 하나는 bye world를 표시한 다음 버튼을 사용하여 애니메이션 전환을 제어합니다. dom元素之间的切换，比如一个div消失，另一个div显示，消失对应着渐出的效果，显示对应渐入的效果，本例我们以两个div，一个显示hello world,另一个显示bye world,然后使用一个按钮控制动画的切换，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素切换动画的实现</title>
<style>
.v-enter-from{
opacity: 0;
}
.v-enter-active{
transition: opacity 1s ease-in;
}
.v-enter-to{
opacity: 1;
}
.v-leave-from{
opacity: 1;
}
.v-leave-active{
transition:opacity 1s ease-in
}
.v-leave-to{
opacity: 0;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show:false
}
},
methods: {
handleClick(){
this.show = !this.show;
}
},
template:
`
<transition mode="out-in" appear>
<div v-if="show">hello world </div>
<div v-else="show" >bye world </div>
</transition>
<button @click="handleClick">switch</button>
`
});
const vm = app.mount('#root');
</script>如上面的代码所示，我们使用CSS定义好渐入和渐出的效果，然后将我们要做动画的div放到<transition></transition>标签之间，使用一个Boolean变量show控制元素的显示和隐藏，当我们点击按钮的时候，执行handleClick函数，将show变量取反，达到切换的效果。 在代码中我们还看到了在transition标签上使用了一个mode="out-in",这个mode的取值其实还有一个是mode="in-out",两者的区别如下：
mode="out-in": 表示两个元素切换的时候，当前的元素先消失，待显示的元素再显示 mode="in-out"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件间切换动画的实现</title>
<style>
.v-enter-from{
opacity: 0;
}
.v-enter-active{
transition: opacity 1s ease-in;
}
.v-enter-to{
opacity: 1;
}
.v-leave-from{
opacity: 1;
}
.v-leave-active{
transition:opacity 1s ease-in
}
.v-leave-to{
opacity: 0;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 多个单组件之间的动画
const ComponentA = {
template:'<div>hello world</div>'
}
const ComponentB = {
template:'<div>bye world</div>'
}
const app = Vue.createApp({
data() {
return {
component:'component-a'
}
},
methods: {
handleClick(){
if(this.component === 'component-a'){
this.component = 'component-b';
}else{
this.component = 'component-a';
}
}
},
components:{
'component-a':ComponentA,
'component-b':ComponentB
},
// 动态组件的方式
template:
`
<transition mode="out-in" appear>
<component :is="component" />
</transition>
<button @click="handleClick">switch</button>
`
});
const vm = app.mount('#root');
</script>Boolean code>변수 <code>show는 버튼을 클릭하면 handleClick 함수가 실행되고 show가 요소의 표시 및 숨기기를 제어합니다. 변수는 전환 효과를 얻기 위해 반전됩니다. 코드에서 mode="out-in"이 전환 태그에 사용되는 것을 볼 수 있습니다. 이 mode의 값은 실제로 mode ="입니다. in-out", 둘 사이의 차이점은 다음과 같습니다.
mode="out-in": 두 요소가 전환되면 현재 요소가 먼저 사라지고 그러면 해당 요소가 표시됩니다. mode="in-out": 두 요소가 전환되면 표시할 요소가 먼저 표시되고 현재 요소가 사라집니다. 두 가지 속성을 모두 시도해보고 효과를 확인하면 느낌이 더 깊어질 것입니다 코드에서 속성이 나타나는 것을 볼 수 있습니다. 이 속성은 브라우저에서 인터페이스를 열 때 애니메이션을 실행한다는 의미입니다. 페이지가 로드될 때 애니메이션 컴포넌트 간 애니메이션 전환Vue에서는 컴포넌트 간 애니메이션 전환도 구현할 수 있습니다. 여기서는 위의 예를 수정하여 동적 컴포넌트 형태로 구현할 수 있습니다. . 위 요소 간 전환에 따른 애니메이션 효과의 코드는 다음과 같습니다. 🎜rrreee위 내용은 Vue3의 요소와 구성 요소 간에 애니메이션을 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7319
9
1625
14
1349
46
1261
25
1209
29
vue3 프로젝트에서tinymce를 사용하는 방법
May 19, 2023 pm 08:40 PM
tinymce는 완전한 기능을 갖춘 리치 텍스트 편집기 플러그인이지만,tinymce를 vue에 도입하는 것은 다른 Vue 리치 텍스트 플러그인만큼 원활하지 않습니다.tinymce 자체는 Vue에 적합하지 않으며 @tinymce/tinymce-vue를 도입해야 합니다. 외국 서식 있는 텍스트 플러그인이며 중국어 버전을 통과하지 못했습니다. 공식 웹사이트에서 번역 패키지를 다운로드해야 합니다(방화벽을 우회해야 할 수도 있음). 1. 관련 종속성을 설치합니다. npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. 중국어 패키지를 다운로드합니다. 3. 프로젝트 공용 폴더에 스킨과 중국어 패키지를 새로 만들고 다운로드합니다.
vue3+vite: src에서 이미지를 동적으로 가져오기 위해 require를 사용할 때 오류를 해결하는 방법
May 21, 2023 pm 03:16 PM
vue3+vite:src는 require를 사용하여 이미지를 동적으로 가져오고 vue3+vite는 여러 이미지를 동적으로 가져옵니다. vue3을 사용하는 경우 require는 이미지를 사용할 수 없습니다. imgUrl:require(' .../assets/test.png') 와 같은 vue2는 typescript가 require를 지원하지 않기 때문에 가져오므로 이를 해결하는 방법은 다음과 같습니다. waitimport를 사용합니다.
Vue3가 마크다운을 구문 분석하고 코드 강조 표시를 구현하는 방법
May 20, 2023 pm 04:16 PM
Vue로 블로그 프론트엔드를 구현하려면 마크다운 파싱을 구현해야 합니다. 코드가 있는 경우 코드 하이라이팅을 구현해야 합니다. markdown-it, vue-markdown-loader,marked,vue-markdown 등과 같은 Vue용 마크다운 구문 분석 라이브러리가 많이 있습니다. 이 라이브러리는 모두 매우 유사합니다. 여기서는 Marked가 사용되었고, 코드 하이라이팅 라이브러리로 하이라이트.js가 사용되었습니다. 구체적인 구현 단계는 다음과 같습니다. 1. 종속 라이브러리를 설치합니다. vue 프로젝트에서 명령 창을 열고 다음 명령 npminstallmarked-save//marked를 입력하여 markdown을 htmlnpmins로 변환합니다.
Vue3에서 페이지의 일부 콘텐츠를 새로 고치는 방법
May 26, 2023 pm 05:31 PM
페이지를 부분적으로 새로 고치려면 로컬 구성 요소(dom)의 다시 렌더링만 구현하면 됩니다. Vue에서 이 효과를 얻는 가장 쉬운 방법은 v-if 지시어를 사용하는 것입니다. Vue2에서는 v-if 명령을 사용하여 로컬 DOM을 다시 렌더링하는 것 외에도 새 빈 구성 요소를 만들 수도 있습니다. 로컬 페이지를 새로 고쳐야 할 경우 이 빈 구성 요소 페이지로 점프한 다음 다시 돌아올 수 있습니다. 빈 원본 페이지의 beforeRouteEnter 가드. 아래 그림과 같이 Vue3.X에서 새로 고침 버튼을 클릭하여 빨간색 상자 안에 DOM을 다시 로드하고 해당 로딩 상태를 표시하는 방법입니다. Vue3.X의 scriptsetup 구문에 있는 구성 요소의 가드에는
vue3 프로젝트가 패키징되어 서버에 게시된 후 액세스 페이지가 공백으로 표시되는 문제를 해결하는 방법
May 17, 2023 am 08:19 AM
vue3 프로젝트가 패키징되어 서버에 게시되면 액세스 페이지에 공백 1이 표시됩니다. vue.config.js 파일의 publicPath는 다음과 같이 처리됩니다. const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='생산'?'./':'/&
Vue3 재사용 가능한 구성 요소를 사용하는 방법
May 20, 2023 pm 07:25 PM
머리말 Vue든 React든, 여러 개의 반복되는 코드를 접하게 되면, 파일을 중복된 코드 덩어리로 채우는 대신, 이러한 코드를 어떻게 재사용할 수 있을지 고민해 보겠습니다. 실제로 vue와 React 모두 컴포넌트를 추출하여 재사용할 수 있지만, 작은 코드 조각이 발견되어 다른 파일을 추출하고 싶지 않은 경우, 이에 비해 React는 동일한에서 사용할 수 있습니다. 파일에서 해당 위젯을 선언합니다. 또는 다음과 같은 renderfunction을 통해 구현합니다. constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(
DefineCustomElement를 사용하여 Vue3에서 구성 요소를 정의하는 방법
May 28, 2023 am 11:29 AM
Vue를 사용하여 사용자 정의 요소 구축 WebComponents는 개발자가 재사용 가능한 사용자 정의 요소(customelements)를 생성할 수 있는 웹 네이티브 API 세트의 집합적 이름입니다. 사용자 정의 요소의 주요 이점은 프레임워크 없이도 어떤 프레임워크에서도 사용할 수 있다는 것입니다. 다른 프런트 엔드 기술 스택을 사용하는 최종 사용자를 대상으로 하거나 사용하는 구성 요소의 구현 세부 사항에서 최종 애플리케이션을 분리하려는 경우에 이상적입니다. Vue와 WebComponents는 보완적인 기술이며 Vue는 사용자 정의 요소를 사용하고 생성하는 데 탁월한 지원을 제공합니다. 사용자 정의 요소를 기존 Vue 애플리케이션에 통합하거나 Vue를 사용하여 빌드할 수 있습니다.
Vue3 및 Element Plus를 사용하여 자동 가져오기를 구현하는 방법
May 22, 2023 pm 04:58 PM
1 소개 1.1 목적 ElementPlus는 주문형 소개를 사용하여 패키지 파일의 크기를 크게 줄입니다. 1.2 최종 효과는 자동으로 구성 요소를 생성하고 파일에 도입하는 것입니다. ElementPlus 구성 요소는 자동으로 구성 요소를 생성합니다. d.ts 파일을 파일에 추가하고 ElementPlusAPI2 준비 ElementPlus 설치#원하는 패키지 관리자 선택#NPM$npminstallelement-plus--save#Yarn$yarnaddelement-plus#pnpm$pnpminstallelement-plus3 누르기
