What is the best way to implement CSS modifications in a specific sequence?

Question

What is the best way to implement CSS modifications in a specific sequence?

There are times when I need to apply multiple CSS changes in a row, ensuring that each one is properly rendered.

The height of the element is set to auto, so transitioning is not possible. To work around this, I want to first set the height to its current computed value and then change the class immediately to trigger the transition. However, doing this in sequential lines of code doesn't give the renderer enough time to process each change individually.

var foo = $(".foo");
foo[0].addEventListener("click", function(ev){
  foo.css({"height":foo.height()+"px"});
  foo.addClass("active");
});  //the 'foo.css...' line is ignored.

We can use window.requestAnimationFrame() to delay actions to the smallest animatable timestep, but for Firefox compatibility, it requires nested calls.

var dan = $(".dan");
dan[0].addEventListener("click", function(ev){
  window.requestAnimationFrame(function(){
    dan.css({"height":dan.height()+"px"});
    window.requestAnimationFrame(function(){
      dan.addClass("active");
    });
  });
});  //this method works, but seems somewhat convoluted with all the nesting.

While this approach technically functions, I'm curious if there are more efficient ways to chain CSS changes like this.

javascript css css-transitions

Answer 1

Answer №1

Utilizing setTimeout in this scenario ensures that the class change occurs only after the calculation of the div's height.

For instance:

var foo = document.getElementsByClassName('foo')[0];
var bar = document.getElementsByClassName('bar')[0];
var dan = document.getElementsByClassName('dan')[0];

function fooFunction(element) {
    element.style.height = element.clientHeight + 'px';

    setTimeout(function(){
        element.classList.add('active');
        element.removeAttribute('style');
    },10);

}

foo.addEventListener('click',function(){fooFunction(foo);},false);
bar.addEventListener('click',function(){fooFunction(bar);},false);
dan.addEventListener('click',function(){fooFunction(dan);},false);

.foo, .bar, .dan{
width:20%;
display: inline-block;
overflow: hidden;
vertical-align:top;
transition: height 1s ease-out;
}

.active {
height:50px;
}

.foo {
background:rgb(150, 100, 100);
}

.bar {
background:rgb(150, 150, 100);
}

.dan {
background:rgb(100, 150, 100);
}

<div class="foo">
<p>Works.</p>
<p>Another paragraph.</p>
<p>Third paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
</div>

<div class="bar">
<p>Works.</p>
<p>Another paragraph.</p>
<p>Third paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
<p>Fourth paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
</div>

<div class="dan">
<p>Works.</p>
<p>Another paragraph.</p>
<p>Third paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
<p>Fourth paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
<p>Fifth paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
</div>

Answer 2

Utilizing setTimeout in this scenario ensures that the class change occurs only after the calculation of the div's height.

For instance:

var foo = document.getElementsByClassName('foo')[0];
var bar = document.getElementsByClassName('bar')[0];
var dan = document.getElementsByClassName('dan')[0];

function fooFunction(element) {
    element.style.height = element.clientHeight + 'px';

    setTimeout(function(){
        element.classList.add('active');
        element.removeAttribute('style');
    },10);

}

foo.addEventListener('click',function(){fooFunction(foo);},false);
bar.addEventListener('click',function(){fooFunction(bar);},false);
dan.addEventListener('click',function(){fooFunction(dan);},false);

.foo, .bar, .dan{
width:20%;
display: inline-block;
overflow: hidden;
vertical-align:top;
transition: height 1s ease-out;
}

.active {
height:50px;
}

.foo {
background:rgb(150, 100, 100);
}

.bar {
background:rgb(150, 150, 100);
}

.dan {
background:rgb(100, 150, 100);
}

<div class="foo">
<p>Works.</p>
<p>Another paragraph.</p>
<p>Third paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
</div>

<div class="bar">
<p>Works.</p>
<p>Another paragraph.</p>
<p>Third paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
<p>Fourth paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
</div>

<div class="dan">
<p>Works.</p>
<p>Another paragraph.</p>
<p>Third paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
<p>Fourth paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
<p>Fifth paragraph. This one is even longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, fugiat facere? Animi, odit et tempore debitis modi quae eaque, libero, dolores magni, voluptas tenetur tempora quidem alias ut praesentium sed.</p>
</div>

Answer 3

Answer №2

If you are unsure of the height of the target elements before the click event, you can easily check it after the DOM has loaded and then set each target element to its own height. This approach ensures that when a target element is clicked: *the animation will function smoothly as the element's height is pre-set. *there will be one less command to execute during the click event.

If you are already familiar with jQuery, you can utilize it throughout:

$(document).ready(function(){
  var $tran = $('.transition');
    $tran.each(function(){
        var height = $(this).height();
        $(this).height(height);
    });
    $tran.click(function(){
        $(this).addClass('active');
    });
});

For vanilla JavaScript:

document.addEventListener('DOMContentLoaded',function(){
  var tran = document.getElementsByClassName('transition');
  for (let i=0; i<=tran.length-1; i++){
    let height = tran[i].clientHeight;
    tran[i].style.height = height + 'px';
    tran[i].addEventListener("click", function(ev){
      this.className = this.className + " active";
    });
  }
});

Here's an example where each target element has the 'transition' class:

<div class="foo transition">
...
<div class="bar transition">
...  
<div class="dan transition">
...

The transition effects have been placed in their own class so they can be easily removed from the HTML later or used on other elements without being tied directly to the click event. You can achieve an "opening up" animation by toggling the classes instead of just adding them:

.foo, .bar, .dan {
  width: 20%;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.transition {
  -webkit-transition: height 1000ms;
  transition: height 1000ms;
}
.active {
  height: 50px !important;
}

Live example available here. *You can choose between using pure JS or jQuery in the example by setting the "use_jquery" variable to true or false.

Answer 4

If you are unsure of the height of the target elements before the click event, you can easily check it after the DOM has loaded and then set each target element to its own height. This approach ensures that when a target element is clicked: *the animation will function smoothly as the element's height is pre-set. *there will be one less command to execute during the click event.

If you are already familiar with jQuery, you can utilize it throughout:

$(document).ready(function(){
  var $tran = $('.transition');
    $tran.each(function(){
        var height = $(this).height();
        $(this).height(height);
    });
    $tran.click(function(){
        $(this).addClass('active');
    });
});

For vanilla JavaScript:

document.addEventListener('DOMContentLoaded',function(){
  var tran = document.getElementsByClassName('transition');
  for (let i=0; i<=tran.length-1; i++){
    let height = tran[i].clientHeight;
    tran[i].style.height = height + 'px';
    tran[i].addEventListener("click", function(ev){
      this.className = this.className + " active";
    });
  }
});

Here's an example where each target element has the 'transition' class:

<div class="foo transition">
...
<div class="bar transition">
...  
<div class="dan transition">
...

The transition effects have been placed in their own class so they can be easily removed from the HTML later or used on other elements without being tied directly to the click event. You can achieve an "opening up" animation by toggling the classes instead of just adding them:

.foo, .bar, .dan {
  width: 20%;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.transition {
  -webkit-transition: height 1000ms;
  transition: height 1000ms;
}
.active {
  height: 50px !important;
}

Live example available here. *You can choose between using pure JS or jQuery in the example by setting the "use_jquery" variable to true or false.

What is the best way to implement CSS modifications in a specific sequence?

Answer №1

Answer №2

Similar questions

React - z-index issue persists

Obtaining weather information for a particular date through wunderground

Using Angular to invoke the transclude directive function inside the transcluded component

CSS menu - Shifting bar: What's the issue?

Loop through a collection of items based on the values in a separate array using jQuery

Adjusting Classes in JavaScript with jQuery

invoking both componentDidMount and componentDidUpdate within the identical code block

Transferring an IONIC project to a different computer

What is the best method for transferring formatted text from the clipboard to an HTML textarea?

Spinning objects in three.js using tween.js to move around the global axis

Utilizing ag-grid in React to render boolean values as text instead of checkboxes

Styling with CSS: How to Show an Absolutely Positioned Element in Google Chrome

While developing my project in NextJS, I encountered a frustrating issue where the build process would fail consistently, even though the development environment ran smoothly. The

What can be done to stop the caching of the route that router.push() redirects to in Next.js middleware?

Use jQuery's animate function to toggle a different div when clicking on one

Using Firebase to connect and disconnect from state in React with Re-base

What is the maximum character limit for jQuery?

Retrieving status code without reliance on a back-end language (maybe through JavaScript?)

Establish a dynamic video backdrop for Bootstrap's Jumbotron element

Guide on adding a post type via the command line: Issue encountered - Anticipated POST console HTML error