南飞雁

V1

2022/08/01阅读:6主题:橙心

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

创建淡入/淡出效果

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

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

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

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

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

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

visibilityopactiy 两个是可以设置过渡动画的

<style>
  div {
    border1px solid #000;
    color: red;
    font-size36px;
    width150px;
    height150px;
  }
  div > span {
    opacity0;
    transition: opacity 1s linear;
  }
  div:hover > span {
    visibility: visible;
    opacity1;
  }
</style>
<div>
  <span>content</span>
</div>

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

<style>
  #upper {
    position: absolute;
    width150px;
    height150px;
    opacity1;
    visibility: visible;
    background-color: beige;
    transition-property: opacity, visibility;
    transition-duration0.6s;
  }
  #lower {
    background-color: aquamarine;
    width200px;
    height200px;
  }
</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>

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

分类:

前端

标签:

CSS

作者介绍

南飞雁
V1