Question

我基本上试图让弹出窗口出现在他们被点击的元素上，类似于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编辑类？任何帮助将不胜感激。

由于

Answer 1

根据谷歌转型是：

从一个州或一个州转变为一个过程或一段时间另一个。

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

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

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

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

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

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

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 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;
}

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

2 个答案: