Css3 Transition Only When Class Is Added, Not When Removed

CSS3 transition only when class is added, not when removed

If you want to only apply a transition when the .message element does not have the unreadMessage class, then put the transition properties in the .message:not(.unreadMessage) selector:

.message{
    background-color: red;
}
.message:not(.unreadMessage) {
    -webkit-transition: background-color 5s; /* Safari */
    transition: background-color 5s;
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 2s;
}

.unreadMessage{
    background-color: blue;
}

• Demo: http://jsfiddle.net/Hs8fa/
• Documentation for :not()

CSS Transition works when adding class, but not removing it

As mentioned in the comments, the issue is that height: 0 immediately hides the element when the class is removed. The opacity still transitions, but you don't see it.

Unfortunately, since height: auto is not a transitionable value, adding a height to the transition is not going to help. You could do it with a fixed height, if you set a delay when the open class is not present, but remove the delay when it is added.

var $menu = $('#menu-main-nav');setInterval(function() {    $menu.toggleClass('open');}, 2000);

#menu-main-nav {    background: grey;    overflow: hidden;    height: 0;    opacity: 0;    transition: opacity 1s, height 0s 1s;}#menu-main-nav.open {    height: 300px;    opacity: 1;    transition: opacity 1s, height 0s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu-main-nav-container">    <ul id="menu-main-nav" class="menu">        <li><a href="#">What We Do</a></li>        <li><a href="#">Team</a></li>        <li><a href="#">Case Studies</a></li>        <li><a href="#">What Next?</a></li>        <li><a href="#contact">Contact</a></li>        <li><a href="#close">Close</a></li>    </ul></div>

CSS transition on height auto only working when adding class, not when removing class

It's the height, you are adding transition on max-height but your height changes to 0 instantly when you remove expanded class.

You can set height: auto; on the .information class with transition only on max-height.

.information{
  height: auto;
  max-height: 0;
  width: 100%;
  overflow: hidden;
  z-index: -1;
  background: #434C69;
  transition: max-height 700ms ease-in-out;

  &.expanded{
    max-height: 500px;
    border-bottom: 1px solid $secondary-blue;
  }
 }

CSS transition only activates when class is toggled on, not off

Place the transition on .header-bar. Currently the transition wont play on the way out, because it is applied to the class that is being removed. It will look something like this:

.menu,
.header-side,
.header-bar,
.menu-side{
  transition: right 0.2s ease;
}

If you wanted to apply a different transition on the way in, then you would apply the transition to .menu-open as well. For example, this snippet would provide a slower transition on the way in and a fast transition on the way out:

.header-bar {
  transition: right 0.2s ease;
}

.menu-open {
  transition: right 0.5s ease;
}

Full Example

Note the use of the unprefixed transition. The -webkit- prefix is possibly required for older browsers. Add the prefixed property above the un-prefixed property.

$('.menu-toggle').click(function() {  $('body, .header-bar').toggleClass('menu-open');  return false;});

* {  box-sizing: border-box;}body {  margin: 0;  padding: 0;}header {  background-color: #c00;  width: 100%;  margin: 0;  padding: 10px;}.menu-toggle {  color: white;  font-weight: bold;  cursor: pointer;  float: right;  position: relative;  right: 0;}.header-bar {  position: fixed;  top: 0;  right: 0;  width: 100%;  height: 15%;  background-color: #00c;  margin: 0;  padding: 15px;}.menu {  overflow-x: hidden;  position: relative;  right: 0;  font-family: "Segoe UI", Arial, Helvetica, sans-serif;  padding-top: 5px;}.menu-open {  right: 200px;}.menu-open .menu-side {  right: 0;}.menu-side {  background-color: #333;  border-right: 1px solid #000;  position: fixed;  top: 0;  right: -200px;  width: 200px;  height: 100%;  padding: 10px;}.menu,.menu-open,.header-side,.header-bar,.menu-side{  transition: right 0.2s ease;}.logo {  width: 250px;  height: 100px;  color: white;  font-weight: bold;  font-size: 36px;  float: left;  position: relative;}.menu-side ul {  list-style: none;  padding-left: 0;  margin: 0}.menu-side ul li a {  color: #eee;  text-decoration: none;}.menu-side ul li a:hover {  text-decoration: underline;}

<header>  <div class="header-bar">    <div class="logo">MWP</div>
    <div class="menu-toggle">Nav</div>
    <nav class="menu-side">      <ul>        <li><a href="#about-me">About Me</a>        </li>        <li><a href="#my-work">My Work</a>        </li>        <li><a href="#testimonials">Testimonials</a>        </li>        <li><a href="#contact-me">Contact Me</a>        </li>      </ul>    </nav>  </div>
  <!-- omitted content filler was here - found in jFiddle --></header><script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

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;}
  }

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.

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>

CSS3 transition animation when adding/removing class in child elements

This issue because the image doesn't have any start height and browser can't calculate the transition, and if you add transition on the small_header class, the transition works only when the image shrinks.

$( ".header" ).on( "click", function() {    $(".header").toggleClass("small_header");});

.header {  height: 400px;  width: 400px;  background: blue;}
.header img {  height:200px;  -webkit-transition: all 1.7s ease;    transition: all 1.7s ease;}
.small_header img {    height: 50px;    background-size: auto 100%;    }
.small_header {    height: 100px;    background-size: auto 100%;        -webkit-transition: all 1.7s ease;    transition: all 1.7s ease;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="header"><img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg"></div>

CSS Transitions Not working after toggle between classes

TL;DR. See the code snippet below which is slightly tweaked from your original code.

A few notes:

1. Consider using button instead of a tag. It's a button that does something when clicked as opposed to a hyperlink that directs to a link when clicked.
2. Be careful with overly specific CSS rules. div.button-dropdown-options (i.e. element name + class name) is more specific than .button-dropdown-options (i.e. class name only), and can trump other less specific selectors. It is what makes you overly rely on !important in multiple places. Over specificity and !important in combination will make it very hard to debug styling.
3. visibility as part of transition property as well. That is, something like transition: opacity 2s, visibility 2s;

function showDropDown() {
  const variantButton = document.getElementById('showdropdown');
  const variantMenu = document.getElementById('variantMenu');
  const animate_arrow = document.querySelector('.btn-dropdown-caret');
  const options = document.querySelector('.btn-dropdown-options');
  const over = document.querySelector('.swiper-container');
  const calculatedOptions = window.getComputedStyle(options);

  variantButton.addEventListener('click', function(event) {
    variantMenu.classList.toggle('dropdownShow');
    animate_arrow.classList.toggle('animate-arrow');
  });

}
showDropDown();

.btn-dropdown {
  display: block;
  position: relative;
  white-space: nowrap;
  margin-top: 5px;
  margin-left: 2px;
}

@media screen and (min-width: 768px) {
  .btn-dropdown {
    z-index: 4;
  }
}

.btn-dropdown .btn-dropdown-link {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}

.form-btn.outlined.btn-dropdown-link {
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  /* -webkit-transition: color 200ms ease;
    transition: color 200ms ease; */
  border: 1px solid #dddddd;
  box-shadow: none;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  color: #6e6d7a;
}

.form-btn.outlined.btn-dropdown-link:hover,
.form-btn.outlined.btn-dropdown-link:focus {
  border: 1px solid #e4b29b;
  color: #1b1b1b;
  box-shadow: 0 0 0 2px rgb(228 178 155 / 10%);
}

.form-btn.outlined.btn-dropdown-link:hover svg,
.form-btn.outlined.btn-dropdown-link:focus svg {
  fill: #666666;
}

.animate-arrow {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateY(-50%) rotate(180deg) !important;
}

.form-btn.outlined,
a.form-btn.outlined {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 1px #e7e7e9 inset;
  box-shadow: 0px 0px 0px 1px #e7e7e9 inset;
  color: #0d0c22;
}

.btn-dropdown .btn-dropdown-link {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-right: 35px;
  text-align: left;
}

.form-btn,
a.form-btn {
  background: #f3f3f4;
  color: #0d0c22;
}

.form-btn,
a.form-btn {
  display: inline-block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 40px;
  padding: 10px 16px;
  -webkit-transition: color 200ms ease;
  transition: color 200ms ease;
  border: none;
  border-radius: 10px;
  outline: none;
  background: #ea4c89;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Variant Selector --Span */

.btn-dropdown.btn-dropdown-neue svg.btn-dropdown-caret {
  fill: #9e9ea7;
}

.btn-dropdown svg.btn-dropdown-caret {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  margin: 0;
  -webkit-transform: translateY(-50%) rotate(0deg);
  -ms-transform: translateY(-50%) rotate(0deg);
  transform: translateY(-50%) rotate(0deg);
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  transition: -webkit-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  fill: currentColor;
}

.form-btn svg,
button.form-btn svg {
  width: 13px;
  height: 13px;
  margin-top: -3px;
  margin-right: 2px;
  fill: currentColor;
  vertical-align: middle;
}

/* DropDown */

.btn-dropdown .btn-dropdown-options {
  right: 0;
}

.btn-dropdown div.btn-dropdown-options {
  z-index: 2;
}

.btn-dropdown-options {
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  position: absolute;
  z-index: 1;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  margin-top: 4px;
  overflow: auto;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity 2s, visibility 2s;
  box-shadow: 0px 1px 2px rgba(128, 138, 157, 0.12), 0px 8px 32px rgba(128, 138, 157, 0.24);
}

.btn-dropdown-options ul {
  padding: 8px 0;
  list-style: none;
}

.btn-dropdown-options li.active a {
  color: #ea4c89;
  font-weight: 500;
  text-decoration: none;
}

.btn-dropdown-options a {
  display: block;
  padding: 8px 15px;
  color: #6e6d7a;
  font-size: 13px;
  text-decoration: none;
}

.btn-dropdown-options.dropdownShow {
  /* animation: 0.3s ease 0s 1 normal forwards running dropdownAnimation !important; */
  visibility: visible;
  opacity: 1;
}

.visuallyhidden {
  opacity: 0;
}

<span class="btn-dropdown btn-dropdown-neue">
  <button id="showdropdown" class="form-btn outlined btn-dropdown-link" data-dropdown-state="closed">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" class="icon btn-dropdown-caret">
      <path d="M21.5265 8.77171C22.1578 8.13764 22.1578 7.10962 21.5265 6.47555C20.8951 5.84148 19.8714 5.84148 19.24 6.47555L11.9999 13.7465L4.75996 6.47573C4.12858 5.84166 3.10492 5.84166 2.47354 6.47573C1.84215 7.10979 1.84215 8.13782 2.47354 8.77188L10.8332 17.1671C10.8408 17.1751 10.8486 17.183 10.8565 17.1909C11.0636 17.399 11.313 17.5388 11.577 17.6103C11.5834 17.6121 11.5899 17.6138 11.5964 17.6154C12.132 17.7536 12.7242 17.6122 13.1435 17.1911C13.1539 17.1807 13.1641 17.1702 13.1742 17.1596L21.5265 8.77171Z"></path>
    </svg>
    <span data-prompt="Variant" data-fade-default="true" class="default-option">
      Sandle Brown
    </span>
</button>

<div id="variantMenu" class="btn-dropdown-options sets-querystring">
  <ul>
    <li class="default-filter-option active"><a href="?timeframe=">Now</a></li>
    <li class="default-filter-option active"><a href="?timeframe=">Now</a></li>
    <li class="default-filter-option active"><a href="?timeframe=">Now</a></li>
    <li class="default-filter-option"><a href="?timeframe=">Now</a></li>
    <li class="default-filter-option"><a href="?timeframe=">Now</a></li>
    <li class="default-filter-option"><a href="?timeframe=">Now</a></li>
  </ul>
</div>
</span>

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>

---

Related Topics