테일윈드 CSS에서 폭 전환은 어떻게 하나요?

테일윈드 CSS에서 폭 전환은 어떻게 하나요?

Tailwind 기본 "w-#" 옵션을 사용하여 전환을 시도하면 전환이 적용되지 않습니다.내 수업에서 너비를 하드코드로 만들면 잘 작동합니다.Tailwinds CSS에 뭔가 이상한 점이 있습니까?또한 Tailwinds CSS가 폭에 대응하고 있기 때문에 이 문제가 발생합니까?

여기 HTML 텍스트가 있습니다.여기서의 주요 부분은 버튼을 클릭하면 전환되는 동적 클래스 "sidebarWidth"입니다.모든 전환, 가장 느리고 쉬운 것들이 내가 테일윈드에서 확장한 것들이야.

<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">

다음은 Vue 구성 요소의 계산된 속성에 있는 JS 코드입니다.

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>

기본적으로 버튼을 클릭하면 사이드바 네비게이션이 슬라이드됩니다.모바일에서는 사이드바 네비게이션이 숨겨져 있기 때문에 슬라이드하고 싶습니다.바탕화면에서는 작은 네비게이션으로 슬라이드하여 전체 화면 네비게이션으로 이동합니다.작동하지만 슬라이드 전환이 작동하지 않습니다.또, 모바일과 데스크탑의 마진 변경은 적절히 애니메이션화 됩니다.

원하는 동작을 활성화하려면 몇 가지 단계를 수행해야 합니다.

첫 번째는 Tailwind 테마를 확장시키는 것입니다.tailwind.config.js. 를 추가해야 합니다.transitionProperty위해서width.

module.exports = {
    ...
    theme: {
        ...
        extend: {
            ...
            transitionProperty: {
                'width': 'width'
            },
        },
    },
}

위의 변경에 의해transition-width이걸 네비게이션 태그에 붙이면 돼특정의 경우는, 다음의 파일을 덮어쓸 수 있습니다.transition-all학급.

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

마지막 단계는 매우 간단합니다.Tailwind가 CSS를 재작성하고 있는지 확인합니다.그 후, 프로젝트의 폭이 매끄럽게 이행하는 것을 알 수 있습니다.

문제의 배경

기본적으로는 Tailwind CSS에서는 폭 및 높이 전환이 활성화되지 않습니다.다음 표에 를 사용할 때 적용되는 CSS를 나타냅니다.transition학급.

transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

보다시피width그리고.height에 누락되어 있다transition-property.

자세한 내용은 Tailwind 설명서를 참조하십시오.

이 플러그인을 사용하여 새 클래스를 추가하여 순풍을 확장할 수 있습니다.

Github: https://github.com/benface/tailwindcss-transitions

npm install tailwindcss-transitions

↪ tailwind.config.config.syslog 편집

{
  theme: {
    transitionProperty: { // defaults to these values
      'none': 'none',
      'all': 'all',
      'color': 'color',
      'bg': 'background-color',
      'border': 'border-color',
      'colors': ['color', 'background-color', 'border-color'],
      'opacity': 'opacity',
      'transform': 'transform',
    },
    transitionDuration: { // defaults to these values
      'default': '250ms',
      '0': '0ms',
      '100': '100ms',
      '250': '250ms',
      '500': '500ms',
      '750': '750ms',
      '1000': '1000ms',
    },
    transitionTimingFunction: { // defaults to these values
      'default': 'ease',
      'linear': 'linear',
      'ease': 'ease',
      'ease-in': 'ease-in',
      'ease-out': 'ease-out',
      'ease-in-out': 'ease-in-out',
    },
    transitionDelay: { // defaults to these values
      'default': '0ms',
      '0': '0ms',
      '100': '100ms',
      '250': '250ms',
      '500': '500ms',
      '750': '750ms',
      '1000': '1000ms',
    },
    willChange: { // defaults to these values
      'auto': 'auto',
      'scroll': 'scroll-position',
      'contents': 'contents',
      'opacity': 'opacity',
      'transform': 'transform',
    },
  },
  variants: { // all the following default to ['responsive']
    transitionProperty: ['responsive'],
    transitionDuration: ['responsive'],
    transitionTimingFunction: ['responsive'],
    transitionDelay: ['responsive'],
    willChange: ['responsive'],
  },
  plugins: [
    require('tailwindcss-transitions')(),
  ],
}

언급URL : https://stackoverflow.com/questions/58210602/how-to-do-width-transition-in-tailwind-css