CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-transitions
Raza Jamil
Raza Jamil

Reputation: 274

CSS transition not working when changing css from javascript

I'm basically trying to make popups appear from the element they were clicked, similar to Angular Material Dialogs here. I know how to do transitions by adding and removing classes but what about when you want to work with styles that are calculated dynamically and need to be set through javascript. This doesn't seem to work.

See plunkr

    $(document).ready(function(){
   
    $(document).on("click", ".heading" , function(ev){
        var el = $(this);
    
    var offset = el.offset();
    
    $(".popup").css("top", offset.top);
    $(".popup").css("left", offset.left);
    
    $(".popup").addClass("visible");
        });
  
    $(".close").on("click", function(ev){
        $(".popup").removeClass("visible");
        });
    });
    .heading{   width:100px;   height:40px;   background-color:grey; margin:50px 0 150px 0;   padding:10px; }
 
    .popup{   
    background-color:grey;   
    position:absolute;   
    height:0   
    width:0; opacity:0;

    -webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;  

    transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s
    ease-out, top 0.3s ease-out, left 0.3s ease-out;   

    -moz-transition:
    opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top
    0.3s ease-out, left 0.3s ease-out;   -ms-transition: opacity 0.5s ease-out,     width 0.3s ease-out, height 0.3s ease-out, top 0.3s
    ease-out, left 0.3s ease-out;   

    -o-transition: opacity 0.5s ease-out,
    width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left
    0.3s ease-out; }

    .popup.visible{   opacity:1;   height:250px;   width:400px;
      top:400px !important;   left:200px !important; }

    .close:hover{cursor:pointer;}
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.0.0"     src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
        <script src="script.js"></script>
      </head>

    <body>
    <div class="heading">click me 1st </div>
    <div class="heading">click me 2nd</div>
    <div class="heading">click me 3rd</div>
    
    
    <div class="popup">
      ttttttttttttttttttttttttttttttttttttttttttttttttttttttt
      <div style="margin:40px" class="close">close</div>
    </div>
    </body>
    </html>

The way it should be is it transitions from the div you clicked on, ends on the center and when you close it transitions back the div you clicked on.

The way it actually is is: clicking the first div makes the popup appear where it's supposed to end. After this point the transition (top and bottom ones) always seem to be one step behind. If you click the 2nd div the transition starts from where it ended before i.e the previous div(which is wrong, it should start from the div you clicked) and ends in the middle, which is also correct. When you hit close it goes back to the correct div.

Is there some way around this? Tell the engine to update values manually or may be edit classes through javascritp? Any help would be appreciated.

Thanks

Upvotes: 1

Views: 3014

Answers (2)

Ori Drori
Ori Drori

Reputation: 191916

Transition according to google is:

the process or a period of changing from one state or condition to another.

To have a transition you have to start with one state, and change it to another state. However, the state needs to be gradual, which means that you've got to wait a bit after setting the 1st state.

When you do this, you set the start top and left and then override them immediately using the visible class.

Note - I've changed the dimensions a bit, to fit the SO examples area. You can find the example with original dimensions here.

$(".popup").css("left", offset.left);

$(".popup").addClass("visible");

To prevent that, use a delay. I've used requestAnimationFrame.

I've also added cleanup for the top and left settings, after the popup closes.

$(document).on("click", ".heading", function(ev) {
    var offset = $(this).offset();
    var $popup = $(".popup");

    //set the starting point
    $popup.css({
      top: offset.top,
      left: offset.left,
      visibility: 'visible'
    });

    //wait and start the show animation
    requestAnimationFrame(function() {
      $popup.addClass("visible");
    });
  });

  $(".close").on("click", function(ev) {
    var $popup = $(".popup");

    $popup
    //only when the hide animation ends we reset the popup
      .one('transitionend', function() {
        $popup.css({
          top: '',
          left: '',
          visibility: 'hidden'
        });
      })
      //start the hide animation
      .removeClass("visible");
  });
h1 {
  color: red;
}
.heading {
  width: 100px;
  height: 40px;
  background-color: grey;
  margin: 50px 0;
  padding: 10px;
}
.popup {
  background-color: grey;
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
  transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
  -moz-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
  -ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
  -o-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
}
.popup.visible {
  opacity: 1;
  height: 150px;
  width: 200px;
  top: calc(50% - 75px) !important;
  left: calc(50% - 100px) !important;
}
.close:hover {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="heading">heading 1</div>
<div class="heading">heading 2</div>
<div class="heading">heading 3</div>


<div class="popup">
  rghe;roigegrh'ragjh oewighe ergj ergj rrgj ger[
  <div style="margin:40px" class="close">close</div>
</div>

Upvotes: 3

Dharmendra Bisht
Dharmendra Bisht

Reputation: 290

use below mentioned CSS code

.heading {
    width: 100px;
    height: 40px;
    background-color: grey;
    margin: 50px 0 150px 0;
    padding: 10px;
}
.popup {
    background-color: grey;
    position: absolute;
    height: 0;
    width: 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
    transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
    -moz-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
    -ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
    -o-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
}
.popup.visible {
    opacity: 1;
    height: 250px;
    width: 400px;
    top: 400px !important;
    left: 200px !important;
}
.close:hover {
    cursor: pointer;
}

Upvotes: 0

Related Questions