Question

我的解决方案： 我将std::equal样式更改为display样式，因为此解决方案最适合我的网页。 Googling“ display block overrides animation ”可以找到许多其他解决方案。接受的答案是给我关键字的答案，以便我可以使用Google。

原帖：

Fiddle here

我已经使用CSS动画而不是JQuery动画制作visibility和fadeIn函数来设置不透明度的动画。单击图像应弹出淡入，图像淡出超过300毫秒。单击正文中的任何位置都应使弹出窗口淡出，图像淡入300毫秒。

此时fadeOut正常工作，但fadeIn似乎忽略了过渡时间，并立即出现。为什么fadeIn不工作？

JavaScript的：

fadeOut

CSS：

function fadeIn(elem) {
    elem.css("display", "block");
    elem.css("opacity", 1);
}

function fadeOut(elem) {
    elem.css("opacity", 0);
    setTimeout(function() {
        elem.css("display", "none");
    }, 300);
}

$("body").on("click", function(ev) {
      if (ev.target != $("#btn")[0] && $("#popup").is(":visible")) {
        fadeIn($("#btn"));
        fadeOut($("#popup"));
    }
});

$("#btn").on("click", function(ev) {
    fadeIn($("#popup"));
    fadeOut($("#btn"));
});

Answer 1

问题是当您使用display: block / display: none时，当删除时，它会正常工作

  function fadeIn(elem) {
  /*
    elem.css("display", "block");
  */    
    elem.css("opacity", 1);
  }

  function fadeOut(elem) {
    elem.css("opacity", 0);
    /*
    setTimeout(function() {
      elem.css("display", "none");
    }, 1300);
    */
  }

  $("body").on("click", function(ev) {
    if (ev.target != $("#btn")[0] && $("#popup").is(":visible")) {
      fadeIn($("#btn"));
      fadeOut($("#popup"));
    }
  });

  $("#btn").on("click", function(ev) {
    fadeIn($("#popup"));
    fadeOut($("#btn"));
  });

body {
  height: 10vh;
  width: 10vw;
}

#btn {
  position: absolute;
  top: 100px;
  left: 10px;
  transition: 1.3s;
  opacity: 1;
}

#popup {
  position: absolute;
  background-color: black;
  color: red;
  z-index: 1;
  padding: 0 1em;
  transition: 1.3s;
  opacity: 0;
}

<img id="btn" src="http://via.placeholder.com/150x150">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<script src="https://new.matt.cat/scipad-app/jquery.hammer.js"></script>
<div id="popup">
  <p>
    click here to close popup
  </p>
</div>

Answer 2

可能尝试

transition: opacity 0.3s;

https://www.w3schools.com/css/css3_transitions.asp

  function fadeIn(elem) {
    elem.css("display", "block");
    elem.css("opacity", 1);
  }

  function fadeOut(elem) {
    elem.css("opacity", 0);
    setTimeout(function() {
      elem.css("display", "none");
    }, 300);
  }

  $("body").on("click", function(ev) {
    if (ev.target != $("#btn")[0] && $("#popup").is(":visible")) {
      fadeIn($("#btn"));
      fadeOut($("#popup"));
    }
  });

  $("#btn").on("click", function(ev) {
    fadeIn($("#popup"));
    fadeOut($("#btn"));
  });

body {
  height: 10vh;
  width: 10vw;
}

#btn {
  position: absolute;
  top: 100px;
  left: 10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 1;
}

#popup {
  position: absolute;
  background-color: black;
  display: none;
  color: red;
  z-index: 1;
  padding: 0 1em;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 0;
}

<img id="btn" src="http://via.placeholder.com/150x150">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<script src="https://new.matt.cat/scipad-app/jquery.hammer.js"></script>
<div id="popup">
  <p>
    click here to close popup
  </p>
</div>

CSS opacity忽略转换时间

2 个答案: