I'm basically trying to make popups appear from the element they were clicked, similar to Angular Material Dialogs [here](https://material.angularjs.org/latest/demo/dialog). 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](https://plnkr.co/edit/IjwjDZm6NcL0POv3xHP2?p=preview)

```js
    $(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");
        });
    });
```

```css
    .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
    <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