Реализация эффекта анимации перехода на страницу Vue

внешний интерфейс Vue.js анимация CSS
Реализация эффекта анимации перехода на страницу Vue

предисловие

В настоящее время мобильные приложения предъявляют все более высокие требования к пользовательскому опыту. В последнее время они работают над оптимизацией взаимодействия с пользователем. Поскольку им необходимо добиться анимационных эффектов, подобных переключению страниц в приложении, информация о поиске Baidu и Google не очень полная, поэтому я написал мои собственные документы и реализовал их.На основе эффекта, кстати, я восполню волну знаний VueRouter и анимации перехода CSS.Заинтересованные друзья могут дать больше советов.

Простой предварительный просмотр демонстрационной карты

Мышление написано на фронте

  • Как сопоставить с соответствующей страницей, которую нужно перепрыгнуть?
  • Как решить, следует ли «вперед» или «назад», а затем использовать разные методы анимации?
  • Как анимировать разные прыжки?

Процесс реализации

1. Сопоставление маршрутов Vue

Создайте экземпляр vue и сопоставьте маршрут.
Создать одностраничное приложение с помощью Vue.js + Vue Router очень просто. С Vue.js мы можем создавать приложения, составляя компоненты.После добавления Vue Router все, что нам нужно сделать, это сопоставить компоненты с маршрутами, а затем указать Vue Router, где их отображать.

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//如果使用模块化机制编程，导入Vue和VueRouter，就需要调用Vue.use(Router)

Затем вы можете сопоставить компоненты маршрутизации:
Определение компонентов (маршрутизации) можно определить самостоятельно.Конечно, чтобы практиковать идею модульной компонентизации, большинство из них импортируются из других файлов. Ниже приведен пример простого взаимодействия четырех страниц «Вход->Главная->Заказ->Оформить заказ»:

import Login from '@/components/login' 
import Index from '@/components/index' 
import PointList from '@/components/pointList/pointList' 
import SettLement from '@/components/pointList/settlement' 

//创建router实例，然后传入‘routes’配置
export default new Router({
  //routes配置可以直接传入，也可以先定义后使用
  //每个路由都应该映射一个组件，其中component可以是通过Vue.extend()创建的组件构造器，
  或者只是一个组件配饰对象。(今天暂时不考虑嵌套路由的情况)
  routes: [
    {
      path: '/', // 登录
      name: 'Login',
      component: Login
    },
    {
      path: '/index', // 主页
      name: 'Index',
      component: Index
    },
    {
      path: '/pointList', // 点单
      name: 'PointList',
      component: PointList
    },
    {
      path: '/settLement', // 结算
      name: 'SettLement',
      component: SettLement
    }
]
})

2. Маршрутный переход $router

组件路由除了使用全局组件 router-link 来实现点击跳转(相当于按钮)外，还可以使用组件本身
具有的一个实例对象$router及其一些属性来达到目标。  
$router 是VueRouter的一个实例对象，相当于一个全局的路由器对象。在Vue实例内部，你可以
通过$router访问路由实例，里面含有很多属性和子对象，例如history对象，经常用到的跳转链
接就可以调用this.$router.push，this.$router.push会往history栈中添加一个新记录。
декларативный программно
<router-link :to="..." router.push(...)

Щелчок эквивалентен вызову router.push(...)
(...) Аргументом этого метода может быть строка или объект, описывающий адрес:

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

Пример перехода маршрутизации компонентов:
1.

<router-link :to="{name:'PointList', params: { userId: 123 }}">
      <i class="icon"><img src="../assets/point.png" alt=""></i>
      <span>点单</span>
</router-link>

<footer class="version" @click="goPage('Author')">v 1.0</footer>
//Js：
methods: {
    goPage(url, param) {
      this.$router.push({ name: url });
    }
}

3. Объект маршрутизации Vue $route (только для чтения)

В приложении, использующем vue-router, объект маршрута будет внедрен в каждый компонент, ему будет присвоено значение this.$route, и при переключении маршрута объект маршрута будет обновлен. Таким образом, маршрут эквивалентен объекту маршрутизации, на который в данный момент выполняется переход, и из него можно получить имя, путь, параметры, запрос и т. д., то есть он содержит информацию, проанализированную текущим URL-адресом, а также записи маршрута. соответствует URL.
Объект маршрута предоставляет следующие свойства (общие):

  1. $route.path
字符串(string)。等于当前路由对象的路径，会被解析为绝对路径，
如:http://example.com/#/login?name=aa，this.$route.path
，输出“/login”，即对应上面1中路由匹配时routes配置中的“path”；
  1. $route.name
    Нить. Иногда удобнее идентифицировать маршрут по имени, особенно при связывании маршрута или выполнении некоторых прыжков. Точно так же имя здесь также соответствует значению имени имени, установленного для маршрута в конфигурации маршрутов:
    Чтобы сослаться на именованный маршрут, передайте объект свойству to маршрутизатора-ссылки:
<router-link :to="{name:'Order', params: { userId: 123 }}">
</router-link>

То же самое и при вызове router.push():

this.$router.push({ name: 'Order', params: { userId: 123 }})
  1. $route.params
    объект. Прыжок по маршруту несет параметры:
this.$router.push({ name: 'Order', params: { userId: 123 }})
console.log(this.$route.params.userId); //123
  1. $route.query
    объект. Доступные переносимые параметры запроса:
this.$router.push({name: 'login', query:{name: 'userName'}});
this.$route.query.name;    //you
//此时路由为:"http://example.com/#/login?name=userName。"
  1. $route.redirectedFrom
    Нить. Источник перенаправления:
如：{ path: '*',redirect: {name: 'hello'}}
	此时访问不存在的路由http://example.com/#/a会重定向到hello，
在hello访问this.$route.redirectedFrom; 输出“/a”。
  1. $route.matched
    Массив (массив). Вся информация, объявленная маршрутом под текущим маршрутом, от родительского маршрута (если есть) до текущего маршрута.
  2. $route.hash
    Нить. Хэш-значение текущего пути.

В-четвертых, как Vue отслеживает $route

watch：{‘$route’ (to, from) {}}

route 作为vue实例的一个响应式属性，和在data中写的属性本质上是一样的，都可以通过this的方式拿到。既然你可以监听data中的属性变化，同样也可以监听Изменения маршрута. Значения параметров в функции обратного вызова по умолчанию объекта, отслеживаемого в часах, — newVal, oldVal. В качестве атрибута $route, конечно же, это понятие «куда» и «от».
Vue использует router.push (передача параметров) для перехода на страницу, изменения параметра, наблюдения за изменением маршрута после перехода, обновления страницы и анимации процесса «из-> в».
Сложность этой функции заключается в том, как получить «предыдущую страницу» и «следующую страницу», то есть как отличить «вперед» или «назад»?
пример:

// watch $route 决定使用哪种过渡
watch:{
    '$route' (to, from) {
      //此时假设从index页面跳转到pointList页面
      console.log(to); // "/pointList"
      console.log(from); // “/index”
      const routeDeep = ['/', '/index','/pointList', '/settLement'];
      const toDepth = routeDeep.indexOf(to.path)
      const fromDepth = routeDeep.indexOf(from.path)
      this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'
    }
  },

to и from являются самыми основными объектами маршрутизации, которые соответственно представляют собой переход с (с) определенной страницы на (на) другую страницу, to.path (представляющий адрес маршрутизации, на который нужно перейти) и from.path одинаковы.
Определите массив routeDeep и отсортируйте каталог маршрутизации по уровню (на данный момент игнорируя случай вложенных маршрутов), в сложных одностраничных приложениях порядок одного уровня (например, несколько кнопок навигации на одной странице) случайным образом, а затем упорядочить каждую навигацию по очереди. Следующая страница, следующая страница... чтобы гарантировать, что каждая «предыдущая страница» находится перед «следующей страницей».
Подводя итог: в соответствии с порядком каталогов маршрутизации, определенных в массиве routeDeep, «toDepth > fromDepth» означает, что «предыдущая страница» переходит на «следующую страницу», и аналогичным образом можно судить, является ли она «вперед» или "назад".

В-пятых, использование компонентов перехода в Vue2.0.

<transition :name="transitionName">
    <router-view class="view app-view"></router-view>
</transition>
  • Атрибут name в переходе используется для замены имени класса в функции vue hook.
  • В переходе может быть только один дочерний элемент, и дочерний элемент должен иметь v-show или v-if, чтобы контролировать, показывать или нет.
Имя класса CSS перехода

Атрибут name в переходе используется для замены имени класса transitionName в функции vue hook.

  • transitionName-enter: определяет начальное состояние перехода входа. Вступает в силу, когда элемент вставляется и удаляется в следующем кадре.
  • transitionName-enter-active: определяет конечное состояние перехода ввода. Вступает в силу, когда элемент вставляется и удаляется после завершения перехода/анимации.
  • transitionName-leave: определяет начальное состояние перехода на выход. Вступает в силу, когда инициируется переход выхода, удаляется в следующем кадре.
  • transitionName-leave-active: определяет конечное состояние перехода выхода. Вступает в силу, когда запускается выходной переход, и удаляется после завершения перехода/анимации.
this.transitionName = toDepth > fromDepth ? 'fold-left' : 'fold-right'

В «смотреть $route», оценивая «вперед» и «назад» перехода страницы, решите использовать другой эффект перехода (сгиб влево или сгиб вправо).

Шесть, анимация, реализация эффекта анимации преобразования

В предыдущем разделе, после оценки пути перехода страницы, задайте разные имена классов «fold-left» и «fold-right» для перехода двух переходов.
Затем в CSS установите разные эффекты анимации для двух имен классов (здесь в качестве примеров используются «скольжение влево» и «скольжение вправо»):

.fold-left-enter-active {
    animation-name: fold-left-in;
    animation-duration: .3s;
  }
  .fold-left-leave-active {
    animation-name: fold-left-out;
    animation-duration: .3s;
  }
.fold-right-enter-active {
    animation-name: fold-right-in;
    animation-duration: .3s;
  }
  .fold-right-leave-active {
    animation-name: fold-right-out;
    animation-duration: .3s;
  }

Свойство анимации — это сокращенное свойство для установки шести свойств анимации:

стоимость описывать
animation-name Задает имя ключевого кадра, которое необходимо привязать к селектору.
animation-duration Задает время в секундах или миллисекундах для завершения анимации.
animation-timing-function Определяет кривую скорости для анимации.
animation-delay Определяет задержку перед запуском анимации.
animation-iteration-count Указывает, сколько раз должна воспроизводиться анимация.
animation-direction Указывает, должна ли анимация по очереди воспроизводиться в обратном порядке. 
@keyframes fold-left-in {
    0% {
      transform: translate3d(100%, 0, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fold-left-out {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-100%, 0, 0);
    }
  }

Создавайте анимацию в соответствии с правилами CSS3 @keyframes. Принцип создания анимации заключается в постепенном изменении одного набора стилей CSS на другой. Этот набор стилей CSS можно менять несколько раз во время анимации. Время, в которое происходит изменение, может быть указано в «процентах» или с помощью ключевых слов «от» и «до», которые эквивалентны «0%» (время начала анимации) и «100%» (время начала анимации). время окончания анимации). В общем, для лучшей поддержки браузера всегда должны быть определены селекторы 0% и 100%.
Свойство преобразования применяет к элементу 2D- или 3D-преобразование. Это свойство позволяет нам вращать, масштабировать, перемещать или наклонять элемент. translate3d(x, y, z) определяет 3D-преобразование. Например, transform: translate3d(100%, 0, 0) изменяет только значение x, что означает горизонтальное скольжение влево. Аналогично, другие ситуации могут быть получены соответственно.

7. Яма, написанная сзади -- проблема пустой заставки при переключении страниц

До оптимизации:

Каждый раз, когда вы переключаетесь, поскольку исходная страница занимает позицию главной страницы, другие страницы, поскольку сам раздел страницы является блочным элементом, другие блочные элементы будут начинать новую строку, поэтому каждый раз, когда вы переключаете страницы, это эквивалентно к вызову новой страницы снизу. , так что будет мгновенный пробел, который представляет собой процесс вызова следующей страницы снизу к параллельной странице главной страницы, а затем выполнение команды перехода анимации.

решить:

Добавьте в CSS страницы настройку position:absolute;, в это время страница отделена от документооборота и не занимает места, благодаря чему следующая страница не будет выдавливаться и будет плавный переход. завершенный. Оптимизировано:

На данный момент для ее решения использовался только этот метод, и могут быть некоторые недостатки.Если есть лучший метод, пожалуйста, сообщите.

Наконец, прикрепите кодовый адрес демо:Демонстрация эффекта анимации перехода на страницу Vue

Суммировать

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

Категории