Kevin Powell - Community•4w ago

Outline transition duration issues

https://gyazo.com/9989a2e09cee6d53cbac555ef24d155a I'm trying to apply a duration on the outline for the start button, for some reason, it has a weird delay, not sure if you can notice. It immediately loads the outline, a bit, then, immediately loads the rest after. It's not smooth. Here's the code:

function Start() {
  return (
    <>
      <button className="mt-2 cursor-pointer rounded-md border-none border-slate-200 bg-slate-200 px-2 text-[1rem] outline-2 outline-blue-400 duration-100 hover:outline">
        Start
      </button>
    </>
  );
}

function Start() {
  return (
    <>
      <button className="mt-2 cursor-pointer rounded-md border-none border-slate-200 bg-slate-200 px-2 text-[1rem] outline-2 outline-blue-400 duration-100 hover:outline">
        Start
      </button>
    </>
  );
}

Anyone know why?

Gyazo

Gyazo Screen Video

4 Replies

lko•4w ago

is the outline width the same on hover and when not in hover?

Chris Bolson•4w ago

You haven't set any transition. Plus I would recommend having the outline there but transparent and then, on hover, changing the color. Something like this: (don't forget the focus state):

<button class="mt-2 cursor-pointer rounded-md border-none bg-slate-200 px-2 text-[1rem] outline outline-2 outline-transparent   transition-[outline] duration-500  hover:outline-blue-400 focus-visible:outline-blue-400">

tejveer•4w ago

Thank you, that works. Will try to understand this more.

Chris Bolson•4w ago

There are 2 things here: Firstly, if the element doesn't have an outline initially, you can't transition it from not existing to existing. That is why you need to define it first with a transparent color (for example). This way, on hover (and focus), you can transition the color. Secondly you hadn't actually added any transition, just the transition duration which, on it's own, does nothing. I used transition-[outline] as Tailwind doesn't have a transition utility class that includes "outline" (as far as I know) and using tranistion-all seemed like overkill for just a single tranistion property.

Gaming

Programming

Outline transition duration issues