Strange CSS transition behavior on adding class

Question

Class Event 1 is what I am trying to achieve by just placing class directly and not adding hover properties, though it's working for Hover Elements.

Please check this pen and you can find the problem by following the below instructions:

Type anything in the "Name"
Click Tab

You should reach the 1st State(Orange border on left and bottom and some transition effect), in which it pulls itself from the right corner, I don't understand why it's doing that. It working completely perfect in the Hover Example which is referenced above as well.

Understanding of my CSS

.draw {

    transition: color 0.25s;

It gives an imaginary border of 2px transparent, which we will highlight later

  &::before,
  &::after {    
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

This is where you start the transition of ::before from top-left corner

/*   This covers the top & right borders (expands right, then down) */
  &::before {
    top: 0;
    left:0;
  }

This will change the color of the text.

  &.dj {
    color: rgb(255,123,0);
  }

Here I want to expand it till 66% width.

/*  Class styles */
  &.dj::before,
  &.dj::after {
    width: 66%;
    height: 100%;
  }

Is it mandatory to add/recommended ::after?

  &.dj::before {
    border-bottom-color: rgb(255,123,0);
    border-left-color: rgb(255,123,0); // Make borders visible
    transition:
      height 0s ease-out, // Width expands first
     width 0.25s ease-out; // And then height
  }
}

Jonathan Nicol · Accepted Answer · 2017-11-08 01:20:05Z

1

I can see a couple of differences between your hover demo and your tab implementation.

The first is that in the hover demo a left border is applied to .draw:before and a bottom border to .draw:after. In your tab implementation both borders are applied to .draw:after, and since .draw:after is aligned to the bottom of the button this messes up the vertical animation, which you actually want to start from the top and animate in a downward direction. This is fixed by giving .draw:after top:0 instead of bottom:0.

The second problem is that you are applying the .draw and .dj classes simultaneously. As a consequence the border width and height is applied immediately. What you need to do is toggle between the width height start and end values. I suggest applying the .draw class directly to the button in your markup, and instead of toggling both classes, only toggle the .dj class when the user tabs.

Here is a forked pen with these changes applied: https://codepen.io/jnicol/pen/EbNavz

There are various other enhancements that could be made, but those changes should fix the immediate problem you have described.

edited Nov 8, 2017 at 1:20

answered Nov 8, 2017 at 1:14

Jonathan Nicol

3,3181 gold badge23 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dhaval Jardosh Over a year ago

That's exactly what I was looking, and also can you please check the last part. i.e draw2 class. I am trying to get the final transition as well. Thank you for the help.

Collectives™ on Stack Overflow

Strange CSS transition behavior on adding class

Understanding of my CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Understanding of my CSS

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related