CODEWITHSUNDEEP
javascriptcsscss-transitions
Caleb White
Caleb White

Reputation: 67

CSS Transitions not working when class is changed by javascript called from child element

I've created a modal window that fades in and out when you click an anchor. The HTML for this is very simple:

<div id="main_wrapper" class="displayed">
    //Some content here
</div>
<div id="dynamic">
    //Dynamically generated (AJAX) content here
    //the below anchor skips the CSS transition somehow!
    <a href='#' onclick='toggleDynamic(); return false;'>Cancel</a>
</div>

//This anchor works exactly as intended
<a href='#' onclick='toggleDynamic(); return false;'>Dynamic</a>

The CSS is just slightly more complex, and I've left out some properties for the sake of brevity:

.displayed{
    opacity:        1 !important;
    pointer-events: auto !important;
    transition:     opacity 1s ease-in .5s !important;
}

#main_wrapper{
    max-width:      800px;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 1s linear;
}

#dynamic{
    position:       fixed;
    display:        block;
    opacity:        0;
    pointer-events: none;
    max-width:      800px;
    transition:     opacity 1s linear;
}

Then I simply use a toggling javascript function:

function $I(id) {
    return document.getElementById(id);
}

var dynamic = $I('dynamic');
var main = $I('main_wrapper');

function toggleDynamic() {
    if(dynamic.className === "") {
        dynamic.className = "displayed";
        main.className = "";
    } else {
        dynamic.className = "";
        main.className = "displayed";
    }
}

ALL of the above code works exactly as expected except one thing - when the anchor inside #dynamic is clicked, the div disappears without a transition! I can't make sense of this, as you can click on the outside anchor all day and get a nice fading transition.

This occurs in all browsers as far as I can tell (IE, FF, Chrome, Opera).

EDIT: I've changed the javascript as it wasn't properly addressing the className before.

Upvotes: 1

Views: 154

Answers (1)

Antoine Combes
Antoine Combes

Reputation: 1454

I can't see why your JS would work as it is, since you're not modifying your #dynamic class, but just a variable (dynamic). For me the corrected snippet works like a charm.

function $I(id) {
    return document.getElementById(id);
}

var dynamic = $I('dynamic').className;
var main = $I('main_wrapper').className;

function toggleDynamic() {
    if($I('dynamic').className === "") {
        $I('dynamic').className = "displayed";
        main = "";
    } else {
        $I('dynamic').className = "";
        main = "displayed";
    }
}
.displayed{
  opacity:        1 !important;
  pointer-events: auto !important;
  transition:     opacity 1s ease-in .5s !important;
}

#main_wrapper{
  max-width:      800px;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 1s linear;
}

#dynamic{
  position:       fixed;
  display:        block;
  opacity:        0;
  pointer-events: none;
  max-width:      800px;
  transition:     opacity 1s linear;
}
<div id="main_wrapper" class="displayed">
    //Some content here
</div>
<div id="dynamic">
    //Dynamically generated (AJAX) content here
    //the below anchor skips the CSS transition somehow!
    <a href='#' onclick='toggleDynamic(); return false;'>Cancel</a>
</div>
//This anchor works exactly as intended
<a href='#' onclick='toggleDynamic(); return false;'>Dynamic</a>

Upvotes: 1

Related Questions