How to choose Visibility, Display, and Opacity when interacting or animating

Create fade in/淡出效果

例如,Create fade in/淡出效果

在 Web 前端开发中,我们可以使用display, opacity,visibility和其他 CSS properties to show and hide elements.

How do these properties differ？What if we want to animate when showing and hiding？本文将为您介绍.

Let's take a look at their differences first：

可以看出,There are still some differences between them,We need to choose the attribute according to the specific situation.

For example, the mouseover fades in and out,我们就不能用display.Because it's not transition-animable CSS 属性.换句话说,It cannot be changed within a given time.

visibility 和 opactiy Two are transition animations that can be set

<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>

看起来很棒.But if we give useopacityHidden elements are bound to click events, 当opacity: 0can still be clicked, Then I want to have a transition effect at this time, Also thought he couldn't be clicked when he was hidden, only when displayed,才能被点击

<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>

In this way, we have a transition effect when hiding, At the same time, after hiding, there is no click event