javascript - 如何显示通知弹出窗口，动画从右上到下出现和减少，从下到上关闭

Question

目前，我的通知弹出窗口工作，但我想在没有 JS/JQuery (only animation)的情况下做这个动画。点击也有问题。当您在弹出窗口打开时单击外部，然后正常工作。但是，如果您单击此文本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>

标签： javascriptjquerycss

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 版本，这是一个使用复选框输入黑客的工作版本。但是，打开/关闭只能通过单击打开来管理。单击外部时菜单未关闭。 https://jsfiddle.net/piiantom/oht40Lk5/ 此外，您所有的菜单都嵌套在 a<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;
}