vue 애니메이션―갈고리 함 수 를 통 해 전반전 애니메이션 조작 실현
1.시작 위치 에 하나(0,0)를 설정 하면 첫 번 째 실행 시 효과 가 없습니다.한 번 의 입장 애니메이션 이 실 행 된 후에 최종 위치 에서 멈 추 면 시작 위치 에 있 지 않 습 니 다.이곳 의 위치 설정 을 통 해 입장 애니메이션 이 끝 날 때의 위 치 를 여기에 맞 출 수 있 습 니 다.
2.엔 터()함 수 를 이해 하 는 엘 의 지시 대상 과 done()지시 대의 반전 함수
3.이해 this.show=!this.show,이 말 은 두 가지 작용 이 있다.하 나 는 디 스 플레이 와 숨 김 을 제어 하 는 것 이 고,다른 하 나 는 false->true 는 후반전 애니메이션 이 며,true->false 는 또 다른 후반전 애니메이션 이다.이렇게 하면 전반전 애니메이션 을 계속 반복 해서 실행 하 는 효 과 를 완성 할 수 있다.
HTML 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
</head>
<style>
.ball{
margin: 50px 50px;
width: 15px;
height: 15px;
border-radius: 50px;
background-color: brown;
}
</style>
<body>
<div id="app">
<input type="button" value=" " v-on:click="show=!show">
<transition
v-on:before-enter="bEnter"
v-on:enter="enter"
v-on:after-enter="aEnter">
<div class="ball" v-show="show"></div>
</transition>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
show:false
},
methods:{
bEnter(el){
el.style.transform = "translate(0,0)"
// ，
// ， ，
},
enter(el,done){
el.offsetTop;
// offsetTop，offsetWeith ，
el.style.transform = "translate(200px,450px)";
el.style.transition = "all 2s ease";
done()
//done enter ， ， aEnter（）， 。
},
aEnter(el){
this.show = !this.show;
}
}
// el ， ， ， el
});
</script>
</body>
</html>
보충 지식:vue 애니메이션 은 오프라인 애니메이션 만 있 고 입장 애니메이션 은 유효 하지 않 습 니 다.
문제 가 있 는 그림:(오프라인 애니메이션 만 있 고 입장 애니메이션 은 유효 하지 않 습 니 다)
해결 후 효과 도:
해결 방법:
transition 탭 에 appeared 속성 추가
<template>
<transition mode="out-in" appear>
<div class="singer-detail">
</div>
</transition>
</template>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
