顺风高度过渡不适用于 h-min、h-fit、h-max 和 h-auto

Question

所以我喜欢在元素改变高度时进行转换。它适用于 h-10、h-20 等。但不适用于 h-min、h-max、h-auto。 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗 〗底字]]]]]

<div id="botnav" className={`${isOpen ? 'h-min' : 'h-0'}
                bg-primary
                flex flex-col
                transition-all duration-500 ease
                
        `}>
            {
                menu.map((item, index) => {
                    return (
                        <Link href={item.link} key={index} className="">
                            <a className=" w-full px-1 py-1 text-white font-bold items-center justify-center border-none ">
                                {item.name}
                            </a>
                        </Link>
                    )
                })
            }

        </div>

tailwind.config.js

module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx}",
    "./src/pages/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#6558F5',
        },
        secondary: '#FED103',
        container: {
          100: '#E0E0E0',
          200: '#C4C4C4'
        }
      },

      gridTemplateColumns: {
        title: '0.1fr 0.9fr'
      },
      transitionProperty: {
        'height': 'height',
      }
    }
  },
  variants: {
    extend: {}
  },
}
```‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎  ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ 

Answer 1

这不仅仅是 Tailwind 问题。 CSS 只支持从一个数值到另一个数值的高度转换，不支持像 height: auto 这样的值。有时，您可以通过在任意大值（您的元素可以达到的最高值）和零之间转换 max-height 值来解决此问题。例如：

<div id="botnav" className={`${isOpen ? 'max-h-40' : 'max-h-0'} transition-all duration-500 ease`}>

Answer 2

如果 Tailwind 不合作，您可以使用 CSS 代替

<div 
  id="botnav"
  style={ isOpen
    ? { maxHeight: "10rem", transition: "max-height 0.15s ease-out"}
    : { maxHeight: "0rem",  transition: "max-height 0.15s ease-in"}
}>

见How can I transition height: 0; to height: auto; using CSS?