CSS不透明度忽略过渡时间

Posted 2023-03-06

【中文标题】CSS不透明度忽略过渡时间

【英文标题】：CSS opacity ignores transition time

【发布时间】：2017-11-01 18:56:03

【问题描述】：

我的解决方案： 我将 display 样式更改为 visibility 样式，因为此解决方案最适合我的网页。谷歌搜索“显示块覆盖动画”可以找到许多其他解决方案。接受的答案是给我关键字以便我可以使用 Google 的答案。

---

原帖：

Fiddle here

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

目前fadeOut有效，但fadeIn似乎忽略了过渡时间，立即出现。为什么fadeIn无效？

javascript：

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"));
);

CSS：

#btn 
    position: absolute;
    top: 100px;
    left: 10px;
    transition: 0.3s;
    opacity: 1;


#popup 
    position: absolute;
    background-color: black;
    display: none;
    color: red;
    z-index: 1;
    padding: 0 1em;
    transition: 0.3s;
    opacity: 0;

---

【参考方案1】：

可以试试

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>

【讨论】：

谢谢，我现在不在，但在我的小提琴中测试它似乎没有改变

是的，我错过了@LGSon 拾取的显示无/块。也就是说，坚持标准可能仍然不是一个坏主意，因为转换（基于规范）应该是 transition: property time 并且您可以使用 all 来设置任何动画属性的动画。

【参考方案2】：

问题是当你使用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>

【讨论】：

你知道为什么display会这样影响它吗？它不应该在 display: block 设置之后开始动画吗？

@DarkMatterMatt 这就是display: block 的工作方式，所以当您设置elem.css("display", "block"); 时，它只会覆盖动画。您可以做的是为此添加超时，因为需要的是强制浏览器重绘该区域。这是一篇更多描述这一点的帖子：***.com/questions/8840580/…

这个 JQuery 是否“有用”？我似乎记得通过 JavaScript (elem.style.display = "block") 设置它不这样做？可能我记错了。

@DarkMatterMatt 不，不管你使用哪个...查看之前的 cmets 链接

感谢您的帮助，我将display 更改为visibility 对我来说效果很好（绝对位置意味着它不会干扰页面流）