创建淡入/淡出效果
例如，创建淡入/淡出效果
在 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>
这样我们就让隐藏的时候有了过渡的效果, 同时隐藏之后就没有了点击事件
本文由mdnice多平台发布
