所以我喜欢在元素改变高度的时候进行过渡。它对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: {}
  },
}
```‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎  ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎ ‎‎‎‎‎‎‎‎‎‎

3条答案

按热度按时间

9rnv2umw1#

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

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

赞(0）回复(0）举报 2023-05-17

eivgtgni2#

如果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?

voj3qocg3#

您可以使用CSS转换max-height，但不能转换height。您可以使用headless-uiTransition元素（由Tailwind创建）

import { Transition } from '@headlessui/react';

    <Transition
        show={isOpen}
        className="transition-all duration-500 overflow-hidden"
        enterFrom="transform max-h-0"
        enterTo="transform max-h-[9999px]"
        leaveFrom="transform max-h-[9999px]"
        leaveTo="transform max-h-0"
    >
        <div id="botnav">
            <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>
    </Transition>

next.js 在h-min、h-fit、h-max和h-auto时，尾风高度过渡不工作

3条答案

相关问题

热门标签

最新问答