Trying to Do a CSS Transition on a Class Change

Trying to do a CSS Transition on a class change

2 points i found that may help:

Transitions from auto to a fixed value might be a problem. Eventually you could try setting the margin-left of the .main-nav-ul to a fixed value per default, not only when it's sticky.

The second is (and this is hacky). Try to apply the class for your .main-nav-ul delayed:

setTimeout(function() {
    $('.main-nav-ul').addClass('nav-slide'); // line 57 in jquery.sticky.js
}, 100);

CSS Transition on Class Change

you need to define width in button CSS before transition it:

function activate(number) {  var bottom1 = document.getElementById("bottom-1");  var bottom2 = document.getElementById("bottom-2");  if (number === 1) {    bottom1.classList.add("active");    bottom2.classList.remove("active");  } else {    bottom2.classList.add("active");    bottom1.classList.remove("active");  }}

body {  display: flex;  }.container {  position: relative;  } .bottom-1 {    position: absolute;    bottom: 0px;    right: 0px;    height: 2px;    width: 0%;    background-color: red;    transition: width 1s ease;        }
 .bottom-2 {    position: absolute;    bottom: 0px;    left: 0px;    height: 2px;    width: 0%;    background-color: red;    transition: width 1s ease;    }.active {  width: 100%;    }

<div class="container">    <button onclick="activate(1)">Button 1</button>    <div id="bottom-1" class="bottom-1 transition"></div></div><div class="container">   <button onclick="activate(2)">Button 2</button>   <div id="bottom-2" class="bottom-2 transition"></div></div>

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.

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>

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>

Vue.js css transition on class change

To answer your question if you have to use transition for something like this, the answer is no. The solution you proposed should work out of the box.

There is probably something else that is interfering with your code, but the one you posted is correct.

I attached the working snippet.

new Vue({    el: '#app',    data: {        isActive: false    },    methods: {      toggleTheme: function(){          this.isActive = !this.isActive;      }    }});

#app {    background: black;    transition: 1s;}
#app.lightTheme {    background: white;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script><div id="app" :class="{ lightTheme: isActive }">   <button @click="toggleTheme">Change theme</button></div>

---

Related Topics