CODEWITHSUNDEEP
javascriptcsscss-transitionstransition
Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Strange CSS transition behavior on adding class

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:

  1. Type anything in the "Name"
  2. 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
  }
}

Upvotes: 0

Views: 89

Answers (1)

Jonathan Nicol
Jonathan Nicol

Reputation: 3298

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.

Upvotes: 1

Related Questions