从JavaScript更改CSS时，CSS过渡不起作用

我基本上试图从单击的元素中显示弹出窗口，类似于此处的角度材料对话框。我知道如何通过添加和删除类来进行过渡，但是当您想使用动态计算并需要通过JavaScript设置样式时，该怎么办。这似乎不起作用。

请参阅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>

应该的方式是从您点击的Div转变，结束在中间，当您关闭时，它会过渡到您单击的DIV。

实际的方式是：单击第一个DIV使弹出窗口在应该结束的位置出现。此后，过渡（顶部和底部）似乎总是落后一步。如果单击第二div，则从之前的端部开始，即以上的div（这是错误的，它应该从单击的div开始），并在中间结束，这也是正确的。当您关闭时，它将返回到正确的div。

有其他方法可以解决吗？告诉引擎手动更新值或可以通过JavasCritp编辑类？任何帮助将不胜感激。

谢谢

根据Google的过渡：

从一个状态或条件更改为另一个。

要进行过渡，您必须从一个状态开始，然后将其更改为另一种状态。但是，国家需要逐步逐步，这意味着您必须在设置第一状态之后等待一点。

执行此操作时，您将设置启动top和left，然后使用visible类立即覆盖它们。

Note - 我已经更改了尺寸，以适合SO示例区域。您可以在此处找到带有原始尺寸的示例。

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

为了防止这种情况，请使用延迟。我使用了requestAnimationFrame。

弹出窗口关闭后，我还为top和left设置添加了清理。

$(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>

使用以下提到的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;
}

相关内容

最新更新

热门标签：