1 Replies - 258 Views - Last Post: 24 May 2020 - 01:48 AM

#1 fatihmert   User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 133
  • Joined: 04-March 12

CSS Animation toggle hover not reversing (pseudo)

Posted 23 May 2020 - 11:43 PM

Hi,

I set all codes from my project codes. I have problem when mouse out at the menu link, not reversing animation. According to my research, they recommended solving with js. There is a mistake somewhere, I couldn't see it for a few days, I would be very happy if you help.

https://codepen.io/f...ert/pen/KKdEBXL

In both cases, mouse out takes place with a very hard. It should be soft animation like when mouse hovering. I couldn't solve.

Thanks for interest.

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Animation toggle hover not reversing (pseudo)

#2 Ornstein   User is offline

  • D.I.C Head

Reputation: 105
  • View blog
  • Posts: 216
  • Joined: 13-May 15

Re: CSS Animation toggle hover not reversing (pseudo)

Posted 24 May 2020 - 01:48 AM

You wouldn't necessarily need JS for this. If you're only interested in animating the opacity and the left position, you should be able to just use CSS transitions instead - which would/should not require any JS.

In any case, there's quite a few issues with your current CSS.

&:hover{
    text-decoration: none;
    color: $backgroundColor;

    &:before{
      content: ' ';
      position: absolute;
      left: 5px; top: 5px;
      width: 22px; height: 22px;
      border-radius: 100%;
      background: $red;
      z-index: -1;
      animation: menu_red_bubble_passive 0.5s forwards;
    }
}


Here, the bubble will only be created when you hover over the link - and it'll be destroyed as soon as the mouse leaves - so there's no opportunity for an exit animation to complete.

&.active{
    ...

    &.leaved:not(.active):before{
      animation: menu_red_bubble_active_out 0.5s forwards;
    }

    ...
}


Look at these two selectors. "&.leaved:not(.active)" is impossible here. ;)

@keyframes menu_red_bubble_active {
  from {left: 5px;}
  to {left: 52%;}
}

@keyframes menu_red_bubble_active_out {
  from {left: 5px;}
  to {left: 52%;}
}


I'm assuming this is some old/test code that never got cleaned up along the way. You'd either want to swap the properties of the menu_red_bubble_active_out animation - or just have the one animation which gets played in reverse.

Fixing those issues (and doing some more shuffling of the CSS), I get this:

$backgroundColor: #F4F7FC;

// app colors
$orange: #DDAE0C;
$red: #FA6400;
$blue: #6236FF;

@keyframes menu_red_bubble_active {
  from {left: 5px;}
  to {left: 52%;}
}

@keyframes menu_red_bubble_active_out {
  from {left: 52%;}
  to {left: 5px;}
}

@keyframes menu_red_bubble_passive {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes menu_red_bubble_passive_out {
  from {opacity: 1;}
  to {opacity: 0;}
}


body{
  background-color:$blue;
}

ul{
  list-style-type: none;
  margin:0;
  display: flex;
  height: 40px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  li{
    font-size:12px;
    line-height: 14px;

    a{
      font-weight: bold;
      color: $backgroundColor;
      padding: 8px 12.5px;
      position: relative;
      transition: all .4s ease;

      &:before{
        content: ' ';
        position: absolute;
        left: 5px; top: 5px;
        width: 22px; height: 22px;
        border-radius: 100%;
        background: $red;
        z-index: -1;
        opacity: 0;
      }

      &:not(.active):hover{
        text-decoration: none;
        color: $backgroundColor;

        &:before{
          animation: menu_red_bubble_passive 0.5s forwards;
        }
      }

      &:before:not(.active){
        background: $red;
      }

      &.leaved:not(.active):before{
        animation: menu_red_bubble_passive_out 0.5s forwards;
      }

      &.active{
        border-radius: 100px;
        border: 2px solid $orange;

        &:not(.leaved):hover{
          &:before{
            animation: menu_red_bubble_active 0.2s forwards;
            animation-timing-function: ease;
          }
        } 
        
        &.leaved:before{
          animation: menu_red_bubble_active_out 0.5s forwards;
        }

        &:before{
          opacity: 1;
        }
      }
    }
  }
}


I'm assuming that's closer to what you had in mind. It should give you something to work with anyway.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1