Question

目前，我的通知弹出工作，但我想在没有JS / JQuery （仅限动画）的情况下进行此动画。点击也有问题。当弹出窗口打开时单击外部，然后正常工作。但是如果你点击这个文本 OPEN ，那么结束动画就不会起作用。动画从右上到下显示和减少，从下到上关闭。它应该在两个方向上工作，但是交替进行。它目前仅在您需要关闭弹出窗口时才有效。

JSFiddle

CSS

.e-p-main {
  margin-top: 40px;
  height: auto;
  width: 200px;
  background: #fff;
  border: 1px solid #ddd;
  z-index: 99;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform .15s ease-out;
  transition: -webkit-transform .15s ease-out;
  -o-transition: transform .15s ease-out;
  transition: transform .15s ease-out;
  transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}

.tsc_1 {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

脚本

$(document).ready(function() {
  $("#e_a_c").click(function(e) {
    $("#t_1").toggle();
    setTimeout(function() {
      $("#t_1").addClass("tsc_1");
    }, 1);
    e.stopPropagation();
  });
  $(document).click(function(e) {
    if (!$(e.target).is('#t_1 *')) {
      $("#t_1").removeClass("tsc_1");
      setTimeout(function() {
        $('#t_1').removeAttr('style');
      }, 150)
    }
  });
});

HTML

<a class="open-edit-popup" id="e_a_c">OPEN</a>

<div id="e_a_p">
  <div class="e-p-cont">
    <div class="e-p-main" id="t_1">
      <div class="e-p-text-1 dps">
        <p>test</p>
        <p>test</p>
        <p>test</p>
      </div>
    </div>
  </div>
</div>

Answer 1

可能不是答案;更多的首发。我不认为你会用完整的CSS解决方案达到你的期望，只是因为没有javascript就无法通过点击它来关闭你的菜单。

无论如何，这是一个使用javascript / jquery的工作版本 https://jsfiddle.net/piiantom/98sfoLcg/ 我重新编写了javascript部分，以便进行功能性事件管理。你提到的错误是固定的。

<强> HTML

<a class="open-edit-popup" id="e_a_c">OPEN</a>

<div id="e_a_p">
  <div class="e-p-cont">
    <div class="e-p-main" id="t_1">
      <div class="e-p-text-1 dps">
        <p>test</p>
        <p>test</p>
        <p>test</p>
      </div>
    </div>
  </div>
</div>

<强> JAVASCRIPT

$(document).ready(function() {
  $("#e_a_c").click(function(e) {
    e.stopPropagation();
      e.preventDefault();
    if ($("#t_1").hasClass("tsc_1")) {
            $("#t_1").removeClass("tsc_1");
    } else {
            $("#t_1").addClass("tsc_1");
    }
  });
  $(document).click(function(e) {
    if ($("#t_1").hasClass("tsc_1")) {
      $("#t_1").removeClass("tsc_1");
    }
  });
});

<强> CSS

.e-p-main {
  margin-top: 40px;
  height: auto;
  width: 200px;
  background: #fff;
  border: 1px solid #ddd;
  z-index: 99;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform .15s ease-out;
  transition: -webkit-transform .15s ease-out;
  -o-transition: transform .15s ease-out;
  transition: transform .15s ease-out;
  transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}

.tsc_1 {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

对于完整的CSS版本，这是一个使用复选框输入hack的工作版本。但是，仅通过单击“打开”来管理打开/关闭。单击外部时菜单未关闭。 https://jsfiddle.net/piiantom/oht40Lk5/ 此外，您的所有菜单都嵌套在<label>内，这不是那么好

<强> HTML

<label>OPEN<input type="checkbox" class="open-edit-popup" id="e_a_c"/>
  <div id="e_a_p">
  <div class="e-p-cont">
    <div class="e-p-main" id="t_1">
      <div class="e-p-text-1 dps">
        <p>test</p>
        <p>test</p>
        <p>test</p>
      </div>
    </div>
  </div>
</div>
</label>

<强> CSS

#e_a_c{
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
#e_a_c:checked+#e_a_p #t_1{
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}


.e-p-main {
  margin-top: 40px;
  height: auto;
  width: 200px;
  background: #fff;
  border: 1px solid #ddd;
  z-index: 99;
  -webkit-transform-origin: top right;
  -ms-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform .15s ease-out;
  transition: -webkit-transform .15s ease-out;
  -o-transition: transform .15s ease-out;
  transition: transform .15s ease-out;
  transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}

如何显示动画显示和从右上到下逐渐减少并从下到上关闭的动画

1 个答案: