Репликация jQuery 'slideDown () с помощью Vue - PullRequest
Новая
       12

Репликация jQuery 'slideDown () с помощью Vue

1 голос
/ 17 октября 2019

Я пытаюсь применить этот пример для отображения моего контента после нажатия кнопки с анимацией вертикального слайда, похожей на jQuery 'slideUp / slideDown.

Мой контентвнутри некоторого Portfolio компонента, который я вызываю таким образом: 

<portfolio v-if="portfolioOpen" />

Нажатие кнопки переключает переменную portfolioOpen с false на true, затем в моем компоненте портфолио у меня есть это: 

<style lang="scss">
  .portfolio-enter-active,
  .portfolio-leave-active {
     transition: all 100ms ease-in 0s
  }

  .portfolio-enter-to,
  .portfolio-leave {
     max-height: 1000px;
     overflow: hidden;
  }

  .portfolio-enter,
  .portfolio-leave-to {
     overflow: hidden;
     max-height: 0;
  }
</style>

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

Почему?

1 Ответ

0 голосов
/ 19 октября 2019

Это не может работать с v-if, потому что тогда содержимое не загружается при загрузке страницы, и Vue требуется время, чтобы вызвать его, что мешает CSS-анимации работать должным образом.

Вместо этого *Необходимо использовать 1004 *, чтобы содержимое уже было в DOM.

...