从javascript更改css时CSS转换不起作用答案

【问题标题】：CSS transition not working when changing css from javascript从javascript更改css时CSS转换不起作用
【发布时间】：2016-12-08 16:13:03
【问题描述】：

我基本上是想让弹出窗口从它们被点击的元素中出现，类似于 Angular Material Dialogs here。我知道如何通过添加和删除类来进行转换，但是当您想要使用动态计算并且需要通过 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 编辑类？任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： javascript jquery html css css-transitions

【解决方案1】：

根据谷歌的转换是：

从一种状态或条件转变为的过程或时期另一个。

要进行转换，您必须从一种状态开始，然后将其更改为另一种状态。但是，状态需要是渐进的，也就是说在设置第一个状态后，你需要等待一段时间。

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

注意 - 我稍微改变了尺寸，以适应 SO 示例区域。您可以找到原始尺寸的示例here。

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

【讨论】：

成功了，我以前遇到过这个问题，但解决方案较少。现在我知道得更多了！
好。这是一个有趣的问题。我的 jQuery 有点生疏了 :)

【解决方案2】：

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

【讨论】：