vue 상태 과도 transition 이 작용 하지 않 는 원인 해결
5273 단어 vue이행 하 다transition
<transition name=" ">
...
</transition>
여기 서 중요 한 것 은 과도 하 는 요 소 는 다음 과 같은 것 중 하나 일 수 밖 에 없다 는 것 이다.조건 부 렌 더 링(v-if 사용)
조건 부 전시(v-show 사용)
동적 구성 요소
모듈 루트 노드
자주 사용 하 는 과도 이름 은 fade 등 이 있 습 니 다.
이렇게 써 도 돼 요.
<transition name="fade">
...
</transition>
이 루어 진 효 과 는 페이드아웃 입 니 다.사용자 정의 과도 애니메이션 이 필요 하 다 면 css 에서 다음 과 같은 클래스 이름 을 수정 하 십시오.
네가 원 하 는 이름.-enter. 진입 전 효과
원 하 는 이름.-enter-active. 들 어 가 는 과도 시간 과 함수
네가 원 하 는 이름.-enter-to. 진입 후 효과
네가 원 하 는 이름-leve 떠 나 기 전 효과
원 하 는 이름-leve-active 떠 나 는 과도 시간 과 함수
네가 원 하 는 이름-leve-to 이탈 후 효과
여기까지 쓰 면 모두 가 transition 을 간단하게 사용 할 것 이 라 고 믿 습 니 다.
다음 코드 를 읽 으 십시오:
<transition name="fade">
<div v-if="show">
<div class="item-box"></div>
</div>
<div v-else>
<span> </span>
</div>
</transition>
결 과 는 페이드아웃 효과 가 전혀 없 었 습 니 다.이것 은 어떤 원인 으로 인해 transition 이 효과 가 없 었 습 니까?이 유 는 여기에 있다.
같은 서명 요소 가 전환 되 었 을 때 키 특성 을 통 해 유일한 값 을 설정 하여 Vue 가 구분 하도록 표시 해 야 합 니 다.그렇지 않 으 면 Vue 는 효율 적 으로 같은 탭 내부 의 내용 만 바 꿀 수 있 습 니 다.기술적 으로 필요 하지 않 더 라 도
그래서 이렇게 써 야 한다.
<transition name="fade">
<div v-if="show" key="box1">
<div class="item-box"></div>
</div>
<div v-else key="box2">
<span> </span>
</div>
</transition>
새로 고침 운행,완벽 한 구현 효과~~~참고 자료:https://cn.vuejs.org/v2/guide/transitions.html
보충:
문제 1:서로 다른 유형의 구성 요소 간 전환,과도 효과 가 있 으 며,같은 구성 요소(서로 다른 내용)전환 은 과도 효과 가 없습니다.
vue 홈 페이지 의 설명:같은 서명 요소 가 전환 되 었 을 때 키 특성 을 통 해 유일한 값 을 설정 하여 Vue 가 구분 하도록 표시 해 야 합 니 다.그렇지 않 으 면 Vue 는 효율 적 으로 같은 탭 내부 의 내용 만 바 꿀 수 있 습 니 다.기술적 으로 필요 하지 않 더 라 도 구성 요소 에 key 를 설정 하 는 것 이 더 좋 은 실천 입 니 다.
개선 후 코드
<transition :name="slide">
<keep-alive>
<component
:is="questionMap[currentQuestion.type]"
:key="index"
:currentQuestion="currentQuestion"
:index="index">
</component>
</keep-alive>
</transition>
구성 요소 에 key="index"를 추가 한 후 모든 유형 에 과도 효과 가 있 습 니 다.이 때 vue 는 모든 구성 요 소 를 다른 구성 요소 로 구분 하기 때 문 입 니 다.문제 2:이전 구성 요소 가 미 끄 러 진 후,다음 구성 요 소 는 미 끄 러 지지 않 고 바로 표 시 됩 니 다.
과도 모드 에 문제 가 있 습 니 다.하 나 는 과 도 를 떠 날 때 다른 하 나 는 과도 에 들 어가 기 시작 합 니 다.이것 은 기본 적 인 행위 입 니 다.-들 어 가 는 것 과 떠 나 는 것 이 동시에 발생 합 니 다.왜냐하면 두 카드 의 과도 가 복합 적 이지 않 기 때 문 입 니 다.우리 가 필요 로 하 는 것 은 먼저 떠 난 후에 다른 것 이 들 어 가 는 것 입 니 다.
동시에 발 효 된 진입 과 이탈 의 과 도 는 모든 요 구 를 만족 시 키 지 못 하기 때문에 Vue 는 과도 모드 를 제공 합 니 다.
<transition :name="slide" mode="out-in">
<keep-alive>
<component
:is="questionMap[currentQuestion.type]"
:key="index"
:currentQuestion="currentQuestion"
:index="index">
</component>
</keep-alive>
</transition>
목록 정렬 을 사용 하려 면 transition-group 을 사용 해 야 합 니 다.다음은 간단 한 예 입 니 다.
<div id="list-demo" class="demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
</div>
new Vue({
el: '#list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length)
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove: function () {
this.items.splice(this.randomIndex(), 1)
},
}
})
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.