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

创建淡入/淡出效果

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

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

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

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

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

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

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

  content

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

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

本文由mdnice多平台发布