집 > 기사 > 웹 프론트엔드 > Vue+BubbleTransition은 페이지 전환 효과를 쉽게 달성합니다.

Vue+BubbleTransition은 페이지 전환 효과를 쉽게 달성합니다.

php中世界最好的语言원래의: 2018-05-26 14:16:261727검색

이번에는 페이지 전환 효과를 쉽게 구현할 수 있는 Vue+BubbleTransition을 소개하겠습니다. Vue+BubbleTransition에서 페이지 전환 효과를 구현하는 데 사용할 수 있는 노트는 무엇입니까?

CodePen 주소

프런트 엔드에서 SPA를 사용한 후 페이지 전환 애니메이션과 같은 더 많은 제어권을 얻을 수 있습니다. 백엔드 페이지에서는 위의 효과를 얻지 못할 수도 있습니다. 명백한 스플래시 화면. 모든 리소스를 다시 로드해야 하기 때문입니다.

오늘은 vue, vue-router, animationjs를 사용하여 위의 효과를 얻는 방법을 설명합니다.

Steps

메뉴를 클릭하여 버블을 생성하고 항목 애니메이션 실행을 시작하세요.
페이지 점프
종료 애니메이션 실행

기능 호출 구성 요소

희망합니다 효과는 v-show 및 v-if와 같은 명령 대신 개체를 통해 호출됩니다. 균일성을 유지하기 위해 Vue는 여전히 구성 요소를 작성하는 데 사용됩니다. 저는 일반적으로 비즈니스 구성 요소와 독립적으로 효과를 유지하기 위해 새로운 Vue 루트 노드를 사용하여 이를 구현합니다.

let instance = null
function createServices (Comp) {
 // ...
 return new Vue({
 // ...
 }).$children[0]
}
function getInstance () {
 instance = instance || createServices(BubbleTransitionComponent)
 return instance
}
const BubbleTransition = {
 scaleIn: () => {
 return getInstance().animate('scaleIn')
 },
 fadeOut: () => {
 return getInstance().animate('fadeOut')
 }
}

그런 다음 BubbleTransitionComponent를 구현하면 BubbleTransition.scaleIn, BubbleTransition.scaleOut이 정상적으로 작동합니다. animejs가 수신할 수 있는 애니메이션 실행 종료 이벤트입니다. anime().finished는 Promise 객체를 가져옵니다.

<template>
 <p class="transition-bubble">
 <span v-show="animating" class="bubble" id="bubble">
 </span>
 </p>
</template>
<script>
import anime from 'animejs'
export default {
 name: 'transition-bubble',
 data () {
 return {
  animating: false,
  animeObjs: []
 }
 },
 methods: {
 scaleIn (selector = '#bubble', {duration = 800, easing = 'linear'} = {}) {
  // this.animeObjs.push(anime().finished)
 },
 fadeOut (selector = '#bubble', {duration = 300, easing = 'linear'} = {}) {
  // ...
 },
 resetAnimeObjs () {
  this.animeObjs.reset()
  this.animeObjs = []
 },
 animate (action, thenReset) {
  return this[action]().then(() => {
  this.resetAnimeObjs()
  })
 }
 }
}

원래 아이디어는 라우터 구성의 특정 경로 메타에 태그를 추가한 다음 beforeEach 중에 애니메이션을 수행하도록 태그를 판단하는 것입니다. 하지만 이 방법은 유연성이 부족합니다. 대신 Hash로 표시하고 Vue-router와 결합하여 전환 시 해시를 재설정합니다.

<router-link class="router-link" to="/#bubbletransition">Home</router-link>
const BUBBLE_TRANSITION_IDENTIFIER = 'bubbletransition'
router.beforeEach((to, from, next) => {
 if (to.hash.indexOf(BUBBLE_TRANSITION_IDENTIFIER) > 0) {
 const redirectTo = Object.assign({}, to)
 redirectTo.hash = ''
 BubbleTransition.scaleIn()
  .then(() => next(redirectTo))
 } else {
 next()
 }
})
router.afterEach((to, from) => {
 BubbleTransition.fadeOut()
})

멋진 애니메이션은 사용자의 관심을 즉시 사로잡을 수 있습니다. 웹사이트를 탐색할 때 저는 종종 '와, 정말 멋지네요!'라고 말합니다. ! ! 한숨을 쉬다. 아마도 최종 구현에는 몇 줄 이상의 코드가 필요하지 않을 것입니다. 다음 번에 디자이너가 불합리한 애니메이션 요구 사항을 제시하면 이 효과를 몇 분 안에 만들 수 있습니다. 여기서는 사용하면 안된다고 생각합니다** 애니메이션이 사용자의 심리적 기대를 충족시키지 못합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!