transition与visibility的淡入淡出效果

最新推荐文章于 2023-10-16 17:00:25 发布

eddyshan

最新推荐文章于 2023-10-16 17:00:25 发布

阅读量3.4k

点赞数 4

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/eddyshan/article/details/106279619

版权

css 专栏收录该内容

2 篇文章

订阅专栏

工作中是我们经常根据条件隐藏显示某些内容，我们来看一下它的实现方法。

1. Visibility

 <div class="outer">
        <div class="cl1">Sample Text</div>
        Hover Here
    </div>

.cl1 {
    transition:visibility 3s;
    visibility:hidden;
}
.outer:hover > div
{
    visibility:visible;
}

在这里插入图片描述

当鼠标悬浮时并没有动画效果，文字立马就显示出来了
当鼠标移开时，3s后消失并没有动画效果

visibility 0表示“隐藏”，1表示完全“显示”,当由0到1过渡时，一旦不为0 了（例如0.0001)，就会立马显示。

当由1到0过度时，经过3秒钟时间，变为0时就立马消失了，所以没有过渡效果

2. Visibility和Opacity

 <div class="outer">
        <div class="cl1">Sample Text</div>
        Hover Here
    </div>

.cl1 {
    transition:visibility 3s, opacity 3s;;
    visibility:hidden;
    opacity: 0;
}
.outer:hover > div
{
    visibility:visible;
    opacity: 1;
}

在这里插入图片描述

有人可能要问，那为什么不直接用opacity，还要加上visibility，不是脱裤子放屁吗，这里就涉及到opacity和visibility的区别了。

opacity:0，元素隐藏起来了，不会改变页面布局, 但是可以响应事件，比如click
visibility:hidden, 元素隐藏起来. 不会改变页面布局, 不会响应事件
display:nonoe, 可以理解成在页面中把该元素删除掉一样