Merge pull request #405 from timolins/replace-tailwind-animations-with-transitions

[Docs] Replace confusing animate-enter/animate-leave with custom animations

Author: timolins

site/components/sections/splitbee-counter.tsx

@@ -49,7 +49,7 @@ export const SplitbeeCounter = () => {
         {letters.map((l, i) => (
           <div
             className={clsx(
-              'animate-enter',
+              'animate-custom-enter',
               'bg-toast-100 rounded p-4 text-lg font-bold font-mono'
             )}
             key={i + '-' + l}

site/components/sections/toast-example.tsx

@@ -188,7 +188,7 @@ const examples: Array<{
     snippet: `toast.custom((t) => (
   <div
     className={\`\${
-      t.visible ? 'animate-enter' : 'animate-leave'
+      t.visible ? 'animate-custom-enter' : 'animate-custom-leave'
     } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5\`}
   >
     <div className="flex-1 w-0 p-4">
@@ -227,7 +227,7 @@ const examples: Array<{
         (t) => (
           <div
             className={`${
-              t.visible ? 'animate-enter' : 'animate-leave'
+              t.visible ? 'animate-custom-enter' : 'animate-custom-leave'
             } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
           >
             <div className="flex-1 w-0 p-4">

site/pages/docs/version-2.mdx

@@ -46,7 +46,7 @@ toast.custom(<div>Minimal Example</div>);
 toast.custom((t) => (
   <div
     className={`bg-white px-6 py-4 shadow-md rounded-full ${
-      t.visible ? 'animate-enter' : 'animate-leave'
+      t.visible ? 'animate-custom-enter' : 'animate-custom-leave'
     }`}
   >
     Hello TailwindCSS! 👋
@@ -60,7 +60,7 @@ toast.custom((t) => (
       toast.custom((t) => (
         <div
           className={`bg-white px-6 py-4 shadow-md rounded-full ${
-            t.visible ? 'animate-enter' : 'animate-leave'
+            t.visible ? 'animate-custom-enter' : 'animate-custom-leave'
           }`}
         >Hello from TailwindCSS! 👋</div>
       ))

site/pages/index.tsx

@@ -143,7 +143,7 @@ export default function Home() {
             />
           </div>
           <div className="text-center my-12 relative duration-200">
-            <h1 className="text-3xl md:text-4xl animate-enter font-bold text-toast-900">
+            <h1 className="text-3xl md:text-4xl animate-custom-enter font-bold text-toast-900">
               The Best Toast in Town.
             </h1>
             <h2 className="text-xl md:text-2xl font-bold text-toast-600 mt-2">

site/tailwind.config.js

@@ -18,16 +18,16 @@ module.exports = {
           '-1px 2px 5px rgba(81, 41, 10, 0.15), 0px 1px 1px rgba(81, 41, 10, 0.15)',
       },
       animation: {
-        enter: 'enter 200ms ease-out',
+        'custom-enter': 'custom-enter 200ms ease-out',
+        'custom-leave': 'custom-leave 150ms ease-in forwards',
         'slide-in': 'slide-in 1.2s cubic-bezier(.41,.73,.51,1.02)',
-        leave: 'leave 150ms ease-in forwards',
       },
       keyframes: {
-        enter: {
+        'custom-enter': {
           '0%': { transform: 'scale(0.9)', opacity: 0 },
           '100%': { transform: 'scale(1)', opacity: 1 },
         },
-        leave: {
+        'custom-leave': {
           '0%': { transform: 'scale(1)', opacity: 1 },
           '100%': { transform: 'scale(0.9)', opacity: 0 },
         },