CSS transition time not applied on transform

Question

I have a div that should slide to the left smoothly over .5s. Right now it's instantly popping to its new position, not sliding.

I'm using jQuery to apply a tranlsateX to the div after a button is pushed. It triggers some ajax which adds a transform to the div's css (at bottom):

 $.ajax({
         method: 'POST',
         url: '/cities/popup',
         data: { latitude: latitude, longitude: longitude },
         dataType: 'html',
         success: function(data){
          $(".popup").css("display", "block");
          $(".popup").empty();
          $(".popup").append(data);
          $(".popup").css("transform", "translateX(-100%)");
 });

Here's all of the styling on the popup class, notice that I'm defining transform time should be 3s at the end of the code block.

.popup{
  background-color: #FFFFFF;
  display: none;
  position: absolute;
  overflow: scroll;
  z-index: 5;
  right: -40%;
  width: 40%;
  height: 100%;
  -webkit-box-shadow: -6px 5px 35px 0px rgba(133,133,133,0.53);
  -moz-box-shadow: -6px 5px 35px 0px rgba(133,133,133,0.53);
  box-shadow: -6px 5px 35px 0px rgba(133,133,133,0.53);
  transition: transform 3s;
}

The transform is working, the div moves, but it's not an animated movement over .5s, simply appears in the new spot instantly. I'm really not sure how to begin troubleshooting this.

Answer 1

The cause

The transition doesn't work because of display: none . display: none to display: block can't be animated, so it breaks the transition.

Solution

One solution is to hide the element without using display: none . The following example works when the div is hidden with opacity: 0 and shown with opacity: 1 .

Note : where display: none removes the element completely, opacity: 0 simply hides it and it can still be interacted with. For example, if it is positioned over a link you will not be able to click the link because of the invisible div.

To overcome this, you could consider pointer-events: none (see browser compatiblity ) so that click events pass beneath it. You would then change it back to pointer-events: auto when shown, so it can be clicked.

Basic example

 body { height: 100vh; } div { height: 100px; width: 100px; background: #F00; transition: transform 1s; } body:hover div { transform: translateX(100px); } /*Will work*/ .willTransition { opacity: 0; } body:hover .willTransition { opacity: 1; } /*Doesn't work*/ .wontTransition { display: none; } body:hover .wontTransition { display: block; } 

 <h1> Hover anywhere here to show!</h1> <h2>Will transition with opacity</h2> <div class="willTransition"></div> <h2>Wont transition with display none to block</h2> <div class="wontTransition"></div> 

Answer 2

Try using

transition: all 3s ease;

Probably its not taking the transform property in particular.

Answer 3

transition: all 3s ease 0s;

解决了！

Answer 4

I think the better idea is add class on popup. It's easiest way