Vue Transition - JavaScript-хуки - PullRequest
Новая
       19

Vue Transition - JavaScript-хуки

0 голосов
/ 11 июня 2019

Исходя из этого ответа , я пытаюсь создать компонент Vue slideToggle с помощью перехода.

slideToggle - классическая парадигма анимации по высоте. Я до сих пор добился успеха ...

Я не хочу устанавливать фиксированные max-height или height, я хочу, чтобы height был динамическим.

Моя анимация работает правильно при отображении и скрытии. Проблема в отмене отображения или скрытия.

Как обращаться с @enter-cancelled и @leave-cancelled крючками? Я новичок в Vue переходов:)

Я поместил свой код в этот CodeSandBox: https://codesandbox.io/s/vue-template-3b7oj

Ответы [ 3 ]

4 голосов
/ 12 июня 2019

Я не знаю, поможет ли это вам, но попробуйте это:

объявить новую переменную: 

data() {
  return {
    height: null,
    toggling: false
  };
},

при запуске функции открытия или закрытия, проверьте, истинно ли toggling, если да, просто отмените, как это: 

    enter(el) {
      if (this.toggling) return;
      this.toggling = true;
      this.height = el.offsetHeight;

      el.style.overflow = "hidden";
      el.style.height = 0;
      el.style.paddingTop = 0;
      el.style.paddingBottom = 0;
      el.style.marginTop = 0;
      el.style.marginBottom = 0;

      setTimeout(() => {
        el.style.transitionProperty = `height, margin, padding`;
        el.style.transitionDuration = this.duration + "ms";
        el.style.height = this.height + "px";
        el.style.removeProperty("padding-top");
        el.style.removeProperty("padding-bottom");
        el.style.removeProperty("margin-top");
        el.style.removeProperty("margin-bottom");
        this.toggling = false;
      });
    },

Будет что-то вроде этого: https://codesandbox.io/s/vue-template-78n7t?fontsize=14

Может быть, я сломал ваш код, извините, но вы поймете идею.

0 голосов
/ 18 июня 2019

Согласно официальной документации Javacript переходы @ листья-отмены доступны только с v-show, где в вашем примере кода вы используете v-if, если вы измените это, вы сможете захватить ловушку @ отпуска-отмены, @ оставить-отменены и @enter -отменяются при прерывании входа или выхода, скажем, вы нажимаете кнопку переключения при открытии, а также нажимаете кнопку при ее закрытии.

0 голосов
/ 14 июня 2019

Вью-Transition-Отмена

Т.Л., др

  • событие отмены пока не вызвано, введите
  • введите отмены, еще не вызванные оставить

Состояние отмены сохраняется в

  • el._enterCb.cancelled

  • el._leaveCb.cancelled

Анализ

Рассмотрим: 

const cb = el._enterCb = once(() => {
    if (expectsCSS) {
      removeTransitionClass(el, toClass)
      removeTransitionClass(el, activeClass)
    }
    if (cb.cancelled) {
      if (expectsCSS) {
        removeTransitionClass(el, startClass)
      }
      enterCancelledHook && enterCancelledHook(el)
    } else {
      afterEnterHook && afterEnterHook(el)
    }
    el._enterCb = null
  })

источник: _enterCb

Так что наивное решение отменить @enter это

el => {el._enterCb.cancelled = true; done()}

Это то, что на самом деле происходит при срабатывании leave

// call enter callback now
  if (isDef(el._enterCb)) {
    el._enterCb.cancelled = true
    el._enterCb()
  }

источник: отпуск

То же относится и к: 

  const cb = el._leaveCb = once(() => {
    if (el.parentNode && el.parentNode._pending) {
      el.parentNode._pending[vnode.key] = null
    }
    if (expectsCSS) {
      removeTransitionClass(el, leaveToClass)
      removeTransitionClass(el, leaveActiveClass)
    }
    if (cb.cancelled) {
      if (expectsCSS) {
        removeTransitionClass(el, leaveClass)
      }
      leaveCancelled && leaveCancelled(el)
    } else {
      rm()
      afterLeave && afterLeave(el)
    }
    el._leaveCb = null
  })

источник: _leaveCb

Можно проверить возможные назначения:

https://github.com/vuejs/vue/search?q=_leaveCb&unscoped_q=_leaveCb

...