Рекомендовать библиотеку анимации переключения компонентов Vue для всех

Vue.js

скажи привет

здравствуйте, всем привет, меня спросили Dresser, и мы встретились, и годы спустя начались скоро, Новый год в новой атмосфере, я желаю вам всем счастливого Нового года, Года Быка вниз.

Добро пожаловать, чтобы следовать за мнойgithub, обновление и выпуск статьи будет осуществлен на github в ближайшее время

Этоадрес блога, добро пожаловать +звезда

перейти к знакомству

Установить

npm install transx
or
yarn add transx

использовать

<!-- 包裹动画元素 -->
<trans-x
  :time="time"
  :delay="delay"
  :autoplay="autoplay"
  :loop="loop"
  :nextTransition="nextTransition"
  :prevTransition="prevTransition"
  ref="transx"
  @over="over"
  @transitionend="transitionEnd"
>
  <div class="comp" v-for="(item, index) in items" :key="index" :index="index + 1"></div>
</trans-x>


import TransX from "transx";

export default {
  components: {
    TransX
  },
  data() {
    return {
      time: 0.6,
      loop: true,
      autoplay: 1000,
      delay: -1,
      nextTransition: "fadeIn",
      prevTransition: "fadeIn",
      defaultIndex: 0
    }
  }
}

Параметры поддержки

параметр иллюстрировать Типы По умолчанию Примечание
time продолжительность анимации number 0.6 единица секунды
loop Отображать ли по кругу boolean true
autoplay Зацикливаться ли автоматически boolean, number false Когда автовоспроизведение передается как истина, оно дает значение по умолчанию 1000 в миллисекундах.
delay интервал анимации number -1
defaultIndex Отображать первые несколько по умолчанию number 0
nextTransition Следующая анимация, типы анимации см. ниже string moveLeftBack
prevTransition Предыдущая анимация, типы анимации см. ниже string moveRightBack

Инцидент поддержки

  • over- Обратный вызов после перехода на границу, вызываемый при прокрутке вверх на первой странице и прокрутке вниз на последней странице
  over: function(isEnd) {
    console.log('边界到了', isEnd);
  }

** Описание: isEnd имеет значение false, когда граница должна переходить на первую страницу, isEnd имеет значение true, когда граница должна переходить на последнюю страницу,

  • transitionend- Обратный вызов в конце анимации, вызывается после окончания анимации, параметр - текущий индекс, значение начинается с 0
  transitionEnd: function(currentIndex) {
    console.log("当前到第几页了: ", currentIndex);
  }

Поддержка API

  • goto- Перейти к номеру страницы, параметром является номер страницы, а индекс начинается с 0
    this.$refs.transx.goto(3); // 跳转到第四页
  • prev- Перейти на предыдущую страницу
    // 不传参
    this.$refs.transx.prev();
    // 传参
    this.$refs.transx.prev({
        time: 0.6,
        delay: -1,
        transition: "moveLeftQuart", // 参考下面[支持动画种类]
    });
  • next- Перейти на следующую страницу
    // 不传参
    this.$refs.transx.next();
    // 传参
    this.$refs.transx.next({
        time: 0.6,
        delay: -1,
        transition: "moveLeftQuart", // 参考下面[支持动画种类]
    });

Поддерживаемые типы анимации

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

  • fadeIn

  • flip

  • shuttleRight

  • zoomRotateIn

иллюстрировать

  • В настоящее время поддерживает только Vue2 и будет обновлен для поддержки Vue3 в будущем.
  • Если у вас возникнут какие-либо проблемы во время использования, вы можете сообщить о проблеме в любое время.прямой выпуск

the last

Спасибо за прочтение, и еще раз желаю всем счастливого нового года и процветающего года быка.

Категории