今天在敲代码的时候，通过html.js.css写一个切换选项卡的效果，当想给内容区添加过渡效果时，发现一直没生效(内容区是通过display:none和block操作让其显示跟隐藏)有遇到这种情况的嘛？解惑一下
以下是一个简单的示例，演示如何使用CSS实现元素的隐藏和显示过渡动画：
<!DOCTYPE html>
<html>
<head>
<title>CSS Transition Demo</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
transition: opacity 0.5s ease-in-out;
}
.hidden {
opacity: 0;
visibility: hidden;
}
</style>
</head>
<body>
<button onclick="toggle()">Toggle Box</button>
<div class="box"></div>
<script>
function toggle() {
var box = document.querySelector('.box');
box.classList.toggle('hidden');
}
</script>
</body>
</html>
在上面的示例中，我们定义了一个名为“box”的div元素，并为其设置了一个过渡效果，当其opacity属性发生变化时，过渡时间为0.5秒，过渡效果为ease-in-out。
我们还定义了一个名为“hidden”的CSS类，该类将元素的opacity属性设置为0，将visibility属性设置为hidden，以实现元素的隐藏效果。
在HTML中，我们使用一个按钮来触发toggle()函数，该函数将“hidden”类添加或删除到“box”元素中，以实现元素的隐藏和显示效果，并且通过CSS过渡效果实现了平滑的过渡动画。