Make Transition on Tabs.

[sofyanlabs]

Hello, Thanks for great project!

I have some problem to make tab panel transition, how it works?
So every tab clicked, it show text on tab panel using transition.

Thanks for help!

[masonlee]

Same question! I was trying to use the Transition components with the Tab.Panels to crossfade the tab content, but haven't figure it out yet.

[taco-chen]

Same question here! It seems I can not directly pass the selected render props of <Tab.Panel> into . Looking forward to know how it works! Thanks!

[emptyfish]

I came up with a basic functioning tab cross fade effect. I am very new to Headless and React in general so I am not entirely sure if this is working as intended or not. I originally tried to apply the effect to the tab panel itself - that doesn't work... you get the fade effect and then the content disappears again. Putting the Transition inside the tab panel as shown below seems to work fine (I made the duration purposely long to demonstrate. This is an example page I made with Next.js/typescript.

import { Tab, Transition } from "@headlessui/react";
import { useState } from "react";

export default function TabExample() {

    const [tabIndex, setTabIndex] = useState(0);

    return (
        <div className="m-3">
            <Tab.Group selectedIndex={tabIndex} onChange={setTabIndex}>
                <Tab.List className="flex space-x-1 rounded-xl p-1 border-b">
                    <Tab>
                        <div className="w-full p-2 text-sm">Tab One</div>
                    </Tab>
                    <Tab>
                        <div className="w-full p-2 text-sm">Tab Two</div>
                    </Tab>
                </Tab.List>
                <Tab.Panels className="p-4">
                    <Tab.Panel>
                        <Transition appear show={tabIndex == 0}
                            enter="transition-opacity duration-500"
                            enterFrom="opacity-0"
                            enterTo="opacity-100"
                            leave="transition-opacity duration-500"
                            leaveFrom="opacity-100"
                            leaveTo="opacity-0">
                            <div>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            </div>
                        </Transition>
                    </Tab.Panel>
                    <Tab.Panel>
                        <Transition appear show={tabIndex == 1}
                            enter="transition-opacity duration-500"
                            enterFrom="opacity-0"
                            enterTo="opacity-100"
                            leave="transition-opacity duration-500"
                            leaveFrom="opacity-100"
                            leaveTo="opacity-0">
                            <div>
                                Lectus vestibulum mattis ullamcorper velit sed ullamcorper.
                            </div>
                        </Transition>
                    </Tab.Panel>
                </Tab.Panels>
            </Tab.Group>
        </div>
    )
}

[henry-wbs]

The leave transition does not work with this example

[Adrianwritenow]

You can set static={true} in the <Tab.panel> in order to preserve the tab panel. I used react-transition-group to handle animations for my project but I imagine that you are facing a similar issue.

[sideshot]

big thanks. that's one step closer.

[MohammadRezaZaer]

more detailed and styled one:

import { useState } from 'react';
import {Tab, Transition} from '@headlessui/react';

function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}

export default function Tabs() {
    let [categories] = useState({
        Recent: [
            {
                id: 1,
                title: 'Does drinking coffee make you smarter?',
                date: '5h ago',
                commentCount: 5,
                shareCount: 2,
            },
            {
                id: 2,
                title: "So you've bought coffee... now what?",
                date: '2h ago',
                commentCount: 3,
                shareCount: 2,
            },
        ],
        Popular: [
            {
                id: 1,
                title: 'Is tech making coffee better or worse?',
                date: 'Jan 7',
                commentCount: 29,
                shareCount: 16,
            },
            {
                id: 2,
                title: 'The most innovative things happening in coffee',
                date: 'Mar 19',
                commentCount: 24,
                shareCount: 12,
            },
        ],
        Trending: [
            {
                id: 1,
                title: 'Ask Me Anything: 10 answers to your questions about coffee',
                date: '2d ago',
                commentCount: 9,
                shareCount: 5,
            },
            {
                id: 2,
                title: "The worst advice we've ever heard about coffee",
                date: '4d ago',
                commentCount: 1,
                shareCount: 2,
            },
        ],
    });
    const [selectedIndex, setSelectedIndex] = useState(0);

    return (
        <div className="w-full max-w-md px-2 py-16 sm:px-0">
            <Tab.Group
                vertical
                selectedIndex={selectedIndex}
                onChange={setSelectedIndex}
            >
                <Tab.List className="flex space-x-1 rounded-xl bg-blue-900/20 p-1">
                    {Object.keys(categories).map((category, index) => (
                        <Tab
                            key={category}
                            className={({ selected }) =>
                                classNames(
                                    'w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700',
                                    'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2',
                                    selected
                                        ? 'bg-white shadow'
                                        : 'text-blue-100 hover:bg-white/[0.12] hover:text-white'
                                )
                            }
                        >
                            {category}
                        </Tab>
                    ))}
                </Tab.List>
                <Tab.Panels className="mt-2" unmount={false}>
                    {Object.values(categories).map((posts, index) => (
                        <Tab.Panel
                            key={index}
                            className={classNames(
                                'rounded-xl bg-white p-3',
                                'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2'
                            )}
                        >
                            <Transition appear show={selectedIndex == index}
                                        enter="transition-opacity duration-500"
                                        enterFrom="opacity-0"
                                        enterTo="opacity-100"
                                        leave="transition-opacity duration-500"
                                        leaveFrom="opacity-100"
                                        leaveTo="opacity-0">

                                <ul>
                                    {posts.map((post) => (
                                        <li
                                            key={post.id}
                                            className="relative rounded-md p-3 hover:bg-gray-100"
                                        >
                                            <h3 className="text-sm font-medium leading-5">
                                                {post.title}
                                            </h3>

                                            <ul className="mt-1 flex space-x-1 text-xs font-normal leading-4 text-gray-500">
                                                <li>{post.date}</li>
                                                <li>&middot;</li>
                                                <li>{post.commentCount} comments</li>
                                                <li>&middot;</li>
                                                <li>{post.shareCount} shares</li>
                                            </ul>

                                            <a
                                                href="#"
                                                className={classNames(
                                                    'absolute inset-0 rounded-md',
                                                    'ring-blue-400 focus:z-10 focus:outline-none focus:ring-2'
                                                )}
                                            />
                                        </li>
                                    ))}
                                </ul>
                            </Transition>
                        </Tab.Panel>
                    ))}
                </Tab.Panels>
            </Tab.Group>
        </div>
    );
}

[EightArmCode]

Thanks!

[nevinlaughlin]

Hi!

Both examples above aren't transitioning for me. I tried them on a fresh install. Any ideas?
"dependencies": { "@types/node": "20.3.1", "@types/react": "18.2.13", "@types/react-dom": "18.2.6", "autoprefixer": "10.4.14", "eslint": "8.43.0", "eslint-config-next": "13.4.6", "next": "13.4.6", "postcss": "8.4.24", "react": "18.2.0", "react-dom": "18.2.0", "tailwindcss": "3.3.2", "typescript": "5.1.3" }

[Joost385]

If all you want is an entrance transition and are okay with the animation running on page load, then you don't even need to use the Transition component. Just add some CSS:

// tailwind.config.ts

const config: Config = {
    theme: {
        extend: {
            animation: {
                "fade-in-grow": "fade-in 300ms, grow 300ms",
            },
            keyframes: {
                "grow": {
                    "from": {
                        "transform": "scale(0.75)",
                    },
                    "to": {
                        "transform": "scale(1)",
                    },
                },
                "fade-in": {
                    "from": {
                        "opacity": "0",
                    },
                    "to": {
                        "opacity": "1",
                    },
                },
            },
        }
    }
}

Then you can just add a single class:

<Tab.Panel className="animate-fade-in-grow">
    ...
</Tab.Panel>