Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – CSS transition is instant Elementor

EDIT: Fixed, turns out Elementor overwrites some styles, see my own answer below.

I’m trying to animate a simple max-height property of a div, but I can’t seem to get the transition animated, it transitions instantly. I’m trying to replicate this w3schools tutorial: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate

I’m using this Javascript to change the max-height on a button click:

<script>
    var coll = document.getElementsByClassName("section_button");
    
    var i;
    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        }
      });
    }
</script>

And this is my CSS:

.section_content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

Hiding the div works, it just doesn’t animate while the w3schools example animates fine in my safari browser. I’ve also tried Chrome but no difference.

Some setup info:

  • Browser: Safari 14 (Chrome no difference)
  • WordPress with Elementor to build the page
  • Code Snippets plugin to inject the JS

I’ve tried everything I found online, but nothing seems to do the trick. Probably there’s some obvious mistake I’m overseeing right now so any help is appreciated!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So it actually turned out that Elementor overwrites the transform property 😑. Since I don't need the Elementor transform style I just used !important to force my own style over Elementors:

    .section_content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}

    Guess I gotta use the inspector better 🙃


  2. 0

    You have not provided the full code to check. But check the below code, I copied your code and added other. check if you find out what you are missing.

        var coll = document.getElementsByClassName("section_button");
    
    var i;
    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        }
      });
    }
    .section_content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
    <button class="section_button">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search