css中visibility如何让元素显示和隐藏的时候有过渡动画

可以使用CSS过渡（transition）属性结合visibility属性来实现元素的显示和隐藏时有过渡动画。

首先，将元素的初始visibility属性设置为hidden，然后在需要显示时，将visibility属性设置为visible，同时设置过渡属性，如下所示：

.element {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease-in-out;
}

.element.show {
    visibility: visible;
    opacity: 1;
}

这里使用了transition属性来设置过渡效果，其中visibility属性的过渡时间为0秒，opacity属性的过渡时间为0.5秒，过渡效果为ease-in-out。当元素添加了class为show时，visibility属性从hidden变为visible，同时opacity属性从0变为1，从而实现了元素的显示和过渡动画。

注意，使用visibility属性来实现元素的显示和隐藏时，需要将opacity属性设置为0或1，否则可能会出现闪烁的情况