进行交互或动画时如何选择Visibility, Display, and Opacity

创建淡入/淡出效果

例如，创建淡入/淡出效果

在 Web 前端开发中，我们可以使用display, opacity,visibility和其他 CSS 属性来显示和隐藏元素。

这些属性有何不同？如果我们想在显示和隐藏时设置动画怎么办？本文将为您介绍。

我们先来看看他们的区别：

可以看出，它们之间还是有一些区别的，我们需要根据具体情况来选择属性。

比如鼠标悬停淡入淡出效果，我们就不能用display。因为它不是可过渡动画的 CSS 属性。换句话说，它不能在给定时间内更改。

visibility 和 opactiy 两个是可以设置过渡动画的

<style>
  div {
    border: 1px solid #000;
    color: red;
    font-size: 36px;
    width: 150px;
    height: 150px;
  }
  div > span {
    opacity: 0;
    transition: opacity 1s linear;
  }
  div:hover > span {
    visibility: visible;
    opacity: 1;
  }
</style>
<div>
  <span>content</span>
</div>

看起来很棒。但是如果我们给使用opacity隐藏元素绑定了点击事件, 当opacity: 0时还是可以被点击的, 那么此时我又想有过渡效果, 又想他在隐藏的时候不能被点击, 只有在显示的时候,才能被点击

<style>
  #upper {
    position: absolute;
    width: 150px;
    height: 150px;
    opacity: 1;
    visibility: visible;
    background-color: beige;
    transition-property: opacity, visibility;
    transition-duration: 0.6s;
  }
  #lower {
    background-color: aquamarine;
    width: 200px;
    height: 200px;
  }
</style>
<div id="upper"></div>
<div id="lower"></div>
<script>
  const [upper, lower] = ["upper", "lower"].map((i) =>
    document.getElementById(i)
  );

  upper.addEventListener("click", () => {
    upper.style.opacity = 0;
    // Toggle comments here to see the difference
    upper.style.visibility = "hidden";
  });

  const randomColor = () => `#${(~~(Math.random() * (1 << 24))).toString(16)}`;
  lower.addEventListener("click", () => {
    lower.style.backgroundColor = randomColor();
  });
</script>

这样我们就让隐藏的时候有了过渡的效果, 同时隐藏之后就没有了点击事件