Can't trigger transition by toggling classes with jQuery

Question

I want to make a simple transition but struggle doing it with jQuery. I create the element that is to be transformed in JS in an eventListener like so:

const sea         


        

Answer 1

There are two issues:

1. The transition property is set in invizible class. So once you remove it, that property is not applicable. To resolve this, associate the transition to the element id.

2. The removeClass and addClass are probably getting applied to the same frame that appends #search_hint while rendering. To mitigate this you could wait for the frame to render, and then add/remove the class. I've done this using setTimeout with timeout value zero.

const searchHint = `
  <h3 id="search_hint" class="invizible">
    Enter a search term to continue!
  </h3>
`;
$('#search_label').append(searchHint);

setTimeout(function() {
  $('#search_hint').removeClass('invizible').addClass('make_vizible');
},0);

#search_hint {
  color: white;
  transition: color 1s ease;
}


#search_hint.invizible {
  color: white;
}

#search_hint.make_vizible {
  color: #404040;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="search_label">

</div>