BubbleTransition эффекта переключения страниц Vue

внешний интерфейс Vue.js Promise дизайнер
BubbleTransition эффекта переключения страниц Vue

Effect

Effect

Адрес CodePen

После использования SPA на внешнем интерфейсе мы можем получить больше контроля, например, анимацию переключения страниц. Возможно, мы не сможем выполнить вышеуказанные эффекты, используя внутреннюю страницу, или при этом будет очевидная заставка. Потому что все ресурсы нужно перезагружать.

Сегодня я использую vue, vue-router, animejs, чтобы объяснить, как достигаются вышеуказанные эффекты.

шаг

  1. Нажмите на меню, чтобы создать пузырь и запустить анимацию входа.
  2. прыжок страницы
  3. Выполнить анимацию выхода

компонент вызова функции

Я надеюсь, что эффект состоит в том, чтобы вызвать его через объект, а не 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Чтобы делать анимацию, animejs — это легкая и мощная анимационная библиотека, использование которой не требует больших затрат.

Здесь используйте anime({}).finished, чтобы получить объект Promise и получить обратный вызов об окончании выполнения анимации.

<template>
  <div class="transition-bubble">
    <span v-show="animating" class="bubble" id="bubble">
    </span>
  </div>
</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="/#__bubble__transition__">Home</router-link>


const BUBBLE_TRANSITION_IDENTIFIER = '__bubble__transition__'

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()
})

Крутые анимации могут мгновенно привлечь внимание пользователей, и я часто отправляю их, когда посещаю некоторые веб-сайты, wocao, это так здорово! ! ! вздох. Может быть окончательная реализация не займет несколько строк кода, вы можете сделать это сами. В следующий раз, когда дизайнер выдвинет необоснованные требования к анимации, вы можете прикинуться навязчивым. Я могу сделать этот эффект за считанные минуты, но я не Думаю, здесь следует использовать ** Анимация не соответствует психологическим ожиданиям пользователей.

Адрес CodePen, добро пожаловать звезда

Для перепечатки просьба указывать источник:w3ctrain.com / 2018/04/07/vue-page-bubble-transition/

Меня зовут Чжоу Сяокай.

Сейчас я фронтенд-разработчик и все еще новичок на пути к программированию. W3ctrain — это место, где я записываю свое обучение и рост.

Категории