Как сделать переход ширины в Tailwind CSS? - PullRequest
Новая
       34

Как сделать переход ширины в Tailwind CSS?

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

Когда я пытаюсь выполнить переход, используя параметры "w- #" по умолчанию в Tailwind, мои переходы не применяются. Когда я жестко кодирую в своих собственных классах для ширины, это прекрасно работает. Есть ли что-то странное с CSS Tailwinds и как он обрабатывает ширину, которая может вызвать это?

Вот текст HTML. Основной частью здесь является динамический класс "sidebarWidth", который переключается при нажатии кнопки. Все переходы, медленный и легкий - это все, что я расширил в Tailwind. 

<nav class="text-white absolute md:relative flex-col min-h-full bg-black mt-24 md:mt-12 transition-all transition-slowest ease" :class="sidebarWidth">

Вот код JS в вычисленных свойствах компонента Vue 

sidebarWidth: function() {
      if (this.$store.getters.isSidebarCollapsed) {
        return "w-14 invisible md:visible";
      } else {
        return "w-64";
      }
    }

Если я поменяюсь местамиw-14 и w-64 для следующих классов, он отлично работает. 

<style scoped>
.width1 {
  width: 100px;
}

.width2 {
  width: 400px;
}
</style>

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

...