CSS Transition When Class Removed

CSS transition when class removed

CSS transitions work by defining two states for the object using CSS. In your case, you define how the object looks when it has the class "saved" and you define how it looks when it doesn't have the class "saved" (it's normal look). When you remove the class "saved", it will transition to the other state according to the transition settings in place for the object without the "saved" class.

If the CSS transition settings apply to the object (without the "saved" class), then they will apply to both transitions.

We could help more specifically if you included all relevant CSS you're using to with the HTML you've provided.

My guess from looking at your HTML is that your transition CSS settings only apply to .saved and thus when you remove it, there are no controls to specify a CSS setting. You may want to add another class ".fade" that you leave on the object all the time and you can specify your CSS transition settings on that class so they are always in effect.

Css3 - transition on removing class

You must have a another class when you'll removeclass, then you need add another class like leaving it it'll contain your end animation

Try this:

    let nav = document.querySelector(".nav-container");
    document.addEventListener("scroll", () => {
          if (window.pageYOffset > 200) {
            nav.classList.add("nav-leaving");
            nav.classList.remove("nav-container-helper");
            setTimeout(() => {
               nav.classList.remove("nav-leaving");
            }, 200);
          } else {
            nav.classList.add("nav-container-helper");
          }
          if (window.pageYOffset > this.navImg) {
            nav.classList.add("navigation-container-scroll");
          } else {
            if (nav.classList.contains("navigation-container-scroll")) {
              nav.classList.remove("navigation-container-scroll");
            }
          }
        });

Css

.nav-container.leaving {
  -webkit-animation: removeHeight 200ms forward; /* Safari 4.0 - 8.0 */
  animation: removeHeight 200ms forward;
}
@keyframes removeHeight {
     from {height: 100px;}
     to {height: 0;}
  }

Transition to default class upon removal of CSS class with animation

To get a transition effect, you can use the transition-property.

The transition-property can be used here, since every property you want to animate only has a start- and end-value.

Translating animation-percentages to seconds

To translate the percentages of your CSS Animation button-animation to seconds, you just calculate 'percentage' * 'animation-duration'.

This works for both the transition-duration-property as well as for the transition-delay-property.

Example:

color is being animated from 20% to 25%, which is a duration of 5% with a delay of 20%.

All in all, the animation should take 2 seconds.
So we calculate for:

  • transition-duration: 5% * 2s = 0.1s
  • transition-delay: 20% * 2s = 0.4s

With that, we can add transition: color 0.1s 0.4s to the .default-class.

Why add it to .default, and not to .animation?

If we were to add the transition-property to .animation, the following would happen:

  • When adding .animation, there will be a transition-effect, since the element now has a transition-property defined.
  • But when removing .animation, the element would no longer have a transition-property defined, meaning there would be no transition.

Now, we want to transition on both adding and removing .animation, meaning we want to have a transition-property defined both when .animation is present and when it is not. That means, transition should not be defined in .animation.

// JS only toggles '.animation'
document.querySelector("button").addEventListener("click", () => {
  document.querySelector("div.default").classList.toggle("animation");
});
body {display: flex}
button {align-self: center}
div.default {
  position: relative;
  border: 2px solid black;
  width: 100px;
  height: 100px;
  background: darkgreen;
}
/* Above code to make a visible working example */

div.default {
  top: 20px;
  color: white;
  transition: top 0.4s, color 0.1s 0.4s;
}
div.default.animation {
  top: 23px;
  color: red;
}
<div class="default">Some text to see the "color"-property</div>
<button>Toggle ".animation"-class</button>

Possible to reverse a css animation on class removal?

I would have the #item start out hidden with the reverse animation by default. Then add the class to give it the animation and show the #item. http://jsfiddle.net/bmh5g/12/

$('#trigger').on({
  mouseenter: function() {
    $('#item').show();
    $('#item').addClass('flipped');
  },
  mouseleave: function() {
    $('#item').removeClass('flipped');
  }
});
#trigger {
  position: relative;
  display: inline-block;
  padding: 5px 10px;
  margin: 0 0 10px 0;
  background: teal;
  color: white;
  font-family: sans-serif;
}

#item {
  position: relative;
  height: 100px;
  width: 100px;
  background: red;
  display: none;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  animation: flipperUp 0.7s;
  animation-fill-mode: forwards;
  -webkit-animation: flipperUp 0.7s;
  -webkit-animation-fill-mode: forwards;
}

#item.flipped {
  animation: flipper 0.7s;
  animation-fill-mode: forwards;
  -webkit-animation: flipper 0.7s;
  -webkit-animation-fill-mode: forwards;
}

@keyframes flipper {
  0% {
    transform: perspective(350px) rotateX(-90deg);
  }
  33% {
    transform: perspective(350px) rotateX(0deg);
  }
  66% {
    transform: perspective(350px) rotateX(10deg);
  }
  100% {
    transform: perspective(350px) rotateX(0deg);
  }
}

@-webkit-keyframes flipper {
  0% {
    -webkit-transform: perspective(350px) rotateX(-90deg);
  }
  33% {
    -webkit-transform: perspective(350px) rotateX(0deg);
  }
  66% {
    -webkit-transform: perspective(350px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(350px) rotateX(0deg);
  }
}

@keyframes flipperUp {
  0% {
    transform: perspective(350px) rotateX(0deg);
  }
  33% {
    transform: perspective(350px) rotateX(10deg);
  }
  66% {
    transform: perspective(350px) rotateX(0deg);
  }
  100% {
    transform: perspective(350px) rotateX(-90deg);
  }
}

@-webkit-keyframes flipperUp {
  0% {
    -webkit-transform: perspective(350px) rotateX(0deg);
  }
  33% {
    -webkit-transform: perspective(350px) rotateX(10deg);
  }
  66% {
    -webkit-transform: perspective(350px) rotateX(0deg);
  }
  100% {
    -webkit-transform: perspective(350px) rotateX(-90deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>

Reversing CSS transition on removal of class

You need to swap the transitions.

Here is a related question that I answered with a similar explanation.

In your specific case, here is what is happening:

  • The transition that is applied on the selector .cover-all is the second transition which is triggered when the class .cover-all--active is removed. The reason it is not the first transition, as you may expect, is because the transition from the other selector is overriding the transition declared by this selector.

  • Likewise, the transition applied on the selector .cover-all.cover-all--active is the first transition which is triggered when the class .cover-all--active is added. This is because the transition from the selector .cover-all.cover-all--active overrides the previous transition, which consequentially means that it is the first transition.

Updated Example

.cover-all {
  /* ... other styles ... */

  /*
    This is the second transition that is triggered.
    It will occur when the class ".cover-all--active" is removed.
  */
  transition:
    border-radius 0.75s 0.75s,
    width 0.75s 0.75s,
    right 0.75s 0.75s,
    height 0.75s,
    top 0.75s;
}

.cover-all.cover-all--active {
  /* ... other styles ... */

  /*
    This is the first transition that is triggered.
    It will occur when the class ".cover-all--active" is added.
  */
  transition:
    border-radius 0.75s,
    width 0.75s,
    right 0.75s,
    height 0.75s 0.75s,
    top 0.75s 0.75s;
}

You can also simplify your jQuery since this refers to the .cover-all element:

$('.cover-all').on('click', function() {
  $(this).toggleClass('cover-all--active');
});

Full code snippet:

$('.cover-all').on('click', function() {  $(this).toggleClass('cover-all--active');});
.cover-all {  background-color: red;  border-radius: 50px;  color: white;  cursor: pointer;  height: 28px;  overflow: hidden;  right: 20px;  top: 29px;  width: 70px;  transition: border-radius 0.75s 0.75s, width 0.75s 0.75s, right 0.75s 0.75s, height 0.75s, top 0.75s;}.cover-all.cover-all--active {  top: 0;  right: 0;  height: 420px;  width: 100%;  border-radius: 0;  transition: border-radius 0.75s, width 0.75s, right 0.75s, height 0.75s 0.75s, top 0.75s 0.75s;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="cover-all"></div>

CSS transitions by adding and removing classes

As mentioned in some other answers (I noticed after writing my code), you could use jQuery's toggleClass function to achieve this.

$(".js-menu-toggle").click(function(e) {  e.preventDefault();  $("#sidebar").toggleClass("expanded");  $("#content-wrapper").toggleClass("expanded");});
html,body 
{  height: 100vh;}
#sidebar {  position: fixed;  top: 0;  left: 0;  width: 50px;  height: 100%;  z-index: 2;  background-color: #102027;  color: #fff;  transition: all 0.3s ease;  overflow: hidden;   white-space: nowrap;}#sidebar.expanded {   width: 180px;}#sidebar .menu-item-desc {   display: inline-block;   white-space: nowrap;  transition: all 0.3s ease;    opacity: 0;   visibility: hidden;}#sidebar .menu-item-desc:hover{   display: block;}#sidebar.expanded .menu-item-desc {   opacity: 1;    visibility: visible;}#sidebar ul {  list-style: none;  padding: 0;  margin: 0;}
#sidebar a {  color: #fff;}
#content-wrapper {  position: relative;  top: 0;  left: 0;  overflow: hidden;  height: 100%;  margin-left: 50px;  padding-top: 100px;  padding-bottom: 30px;  transition: all 0.3s ease;}#content-wrapper.expanded {    margin-left: 180px;}#header-wrapper {  position: absolute;  top: 0;  left: 0;  z-index: 2;  overflow: hidden;  width: 100%;  height: 100px;}
#header {  width: 100%;  height: 50px;  background-color: #fff;}
#subheader {  width: 100%;  height: 50px;  background-color: #37474f;  color: #fff;  clear: right;}
#content {  position: relative;  top: 0;  left: 0;  overflow: auto;  z-index: 1;  width: 100%;  height: 100%;  padding-top: 15px;  padding-bottom: 15px;}
#footer {  position: absolute;  bottom: 0;  left: 0;  z-index: 2;  overflow: hidden;  width: 100%;  height: 30px;  line-height: 30px;  border-top: solid 1px #cfcfcf;  background: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">  <a class="js-menu-toggle" href="#">TOGL</a>  <ul>    <li>Item 1<span class="menu-item-desc"> - Item 1 Desc</span></li>    <li>Item 2<span class="menu-item-desc"> - Item 2 Desc</span></li>    <li>Item 3<span class="menu-item-desc"> - Item 3 Desc</span></li>  </ul></div><div id="content-wrapper">  <div id="header-wrapper">    <div id="header" class="container-fluid">Header</div>  </div>  <div id="content" class="container-fluid">PRIMARY CONTENT</div></div>

CSS transition not working when removing class

In your css, the properties like position, text-align etc do not support transition.So I moved that properties from css and is now injecting through js with/with out a delay. Also I applied position:absolute for the navigation and aligned it at the top of the body. It normally behaves as a floated block element. May be you have to apply a top margin for the proceeding element to avoid overlap. If that is okay, you may try the below example. <div class="spacer"></div> is a dummy element to make the page scroll-able.

$(window).scroll(function () {    var scroll = $(window).scrollTop();
    if (scroll >= 800) {        $(".nav").css({            'position': 'fixed',            'text-align': 'center'        });        $(".nav").addClass("sticky");    } else {        $(".nav").removeClass("sticky");        setTimeout(function (){            $(".nav").css({                'position': 'static',                'text-align': 'left'            });        },400);    }});
.nav {    position:absolute;    top: 0;    left: 0;    width: 100%;    font-weight: 600;    text-transform: uppercase;    transition: all 400ms ease;
    &__link {        text-decoration: none;        color: white;
        &:not(:last-child) {            margin-right: 6rem;        }    }}
.sticky {    padding: 1rem 0;    width: 100%;    z-index: 1;    text-align: center;    background: #ccc;    position: fixed;}.spacer{    width: 100%;    height: 2000px;    float: left;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><nav class="nav">    <a href="#" class="nav__link">Home</a>    <a href="#" class="nav__link">About us</a>    <a href="#" class="nav__link">Menu</a>    <a href="#" class="nav__link">Drinks</a>    <a href="#" class="nav__link">Reservations</a></nav><div class="spacer"></div>

How to reverse a CSS transition animation when removing an active class?

Yes, CSS has this functionality built in - you just need to have the transition property persist on the element's base styles, so that it applies regardless of whether the modifier class is added/removed.

For example:

.sliding-box {
  transition: transform .5s;
  background: green;
  height: 5em;
  width: 5em;
}

.sliding-box.active {
  transform: translateX(5em);
}
<div class="sliding-box"></div>
<br>
<button 
  onclick="document
  .getElementsByClassName('sliding-box')[0]
  .classList.toggle('active')">
  Toggle Slide</button>

CSS transitions not working after removing class

As you can see, the transition doesn't apply on the animation.

So the solution is simple, rename your trigger-* animations to trigger-open-* and create the corresponding trigger-close-* animations.

Then every time you add the open-* class, remove the close-* class.
and every time you remove the open-* class, add the close-* class.

Here is your jsfiddle fixed.
https://jsfiddle.net/pu5y8quz/


Related Topics

Disable/Turn Off Inherited CSS3 Transitions

CSS Conventions/Code Layout Models

CSS Animation: Number Increment Effect

Dynamically Generate CSS File from Database in ASP.NET MVC

What Does :Global (Colon Global) Do

Why Is Vertical-Align:Text-Top; Not Working in CSS

CSS H1 - Only as Wide as the Text

CSS Unit Testing

How to Use a Stylus Variable in Calc

Disable a Textbox Using CSS

Change Svg Viewbox Size with CSS

Lining Up Labels with Radio Buttons in Bootstrap

Transition Color Fade on Hover

Combining Multiple CSS Animations into One Overall Animation

Div Anchors Scrolling Too Far

Vertical Scrolling in iOS Not Smooth

CSS 100Vh Is Too Tall on Mobile Due to Browser Ui

Canvas VS. Webgl VS. CSS 3D -> Which to Choose


Leave a reply



Submit