Используйте анимацию анимации перехода в проекте Vue, чтобы добавить несколько простых и причудливых эффектов переключения страниц.
Первый шаг — ввести стили css
Внесите ссылку на index.html в общую папку проекта vue, просто скопируйте ее:
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
Как показано ниже:
Здесь я поставил в строке 10
Второй шаг — использовать тег перехода в компоненте для переноса routerview.
Для достижения анимационного эффекта он должен быть реализован на routerview, просто скопируйте его
<transition
enter-active-class="animated bounce"
leave-active-class="animated bounce"
>
<router-view></router-view>
</transition>
Как показано ниже:
Здесь необходимы два свойства,
enter-active-class 进入时的动画类名；leave-active-class 离开时的动画类名
Мы можем найти имя пользовательского чрезмерного класса на официальном сайте vue, просто скопируйте его:
https://cn.vuejs.org/v2/guide/transitions.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BF%87%E6%B8%A1%E7 %9A%84%E7%B1%BB%E5%90%8D
Третий шаг — установить имя класса стиля анимированной анимации.
Перейдите на официальный сайт animate, найдите свой любимый стиль анимации и скопируйте имя класса:
https://animate.style/
Как показано ниже:
Щелкните значок, чтобы скопировать имя класса:
Скопировав его, мы можем использовать его в теге, который мы написали ранее, и добавить его к имени класса animated,
Добавьте имя класса анимации, которое будет добавлено после пробела.
**
Примечание. Все имена классов, скопированные здесь, имеют такой формат: animate__bounceвам нужно animate__удалить
**
вот и все
Готово, желаю успехов.