집 > 기사 > 웹 프론트엔드 > BubbleTransition이 페이지 전환 기능을 구현하는 방법

BubbleTransition이 페이지 전환 기능을 구현하는 방법

php中世界最好的语言원래의: 2018-05-02 09:43:021414검색

이번에는 BubbleTransition에서 페이지 전환 기능을 구현하는 방법을 보여 드리겠습니다. 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!