Vue Transition 은 원본 구성 요소 의 과도 애니메이션 을 구현 하 는 예제 입 니 다.
2421 단어 VueTransition이행 하 다
공식 문서:https://cn.vuejs.org/v2/guide/transitions.html
프레젠테이션 주소:http://www.coderlife.com(모 바 일 에서 보 세 요.PC 에서 보 세 요.모 바 일 디 버 깅 모드 를 열 어 주세요)
머리말
Vue 의 UI 프레임 워 크 를 많이 봤 는데 과도 애니메이션 이 없 었 어 요.오늘 은 심혈 을 기울 여 평소에 사용 하 던 동 효 를 빼 버 렸 어 요.비계 init 모드 를 통 해 다른 UI 프레임 에 직접 사용 할 수 있 으 며 따로 설정 할 필요 가 없습니다.
의 원리
모듈 에 서 는 Vue 가 제공 하 는 패 키 징 구성 요소 transition 을 사용 하여 CSS 클래스 이름과 함께 enter/leave 의 6 가지 서로 다른 상태 에서 전환 합 니 다.
enter/leave 과도 에서 전환 하 는 클래스 이름 에 대해 v-는 이러한 클래스 이름 의 접두사 입 니 다.
<transition name="my-transition"> 를 사용 하면 접 두 사 를 초기 화 할 수 있 습 니 다.예 를 들 어 v-enter 을 my-transition-enter로 바 꿀 수 있 습 니 다.점프 함수 다시 쓰기
// ，
const nextDirection = (direction) => {
let el = document.getElementById('app')
if (el) el.setAttribute('transition-direction', direction)
}
router['_push'] = router['push']
// ，
router.forward = router['push'] = (target) => {
nextDirection('forward')
setTimeout(() => { router['_push'](target) })
}
// ，
router.back = (target) => {
nextDirection('back')
if (target) {
setTimeout(() => { router['_push'](target) })
}
history.go(-1)
}
# init template
vue init CoderLQChou/v-transition-template my-transition-app
# cd project
cd my-transition-app
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
