transition/animation与visibility/display

最新推荐文章于 2021-08-04 05:15:12 发布

screaming_color

最新推荐文章于 2021-08-04 05:15:12 发布

阅读量1.5k

点赞数

分类专栏： css 前端文章标签： visibility display transition

本文链接：https://blog.csdn.net/screaming_color/article/details/51867595

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

首先来看transition的测试结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #display{
        background: grey;
        width:200px;
        height:100px;
        -webkit-transition: all 2s;
    }
    #display:hover{
        background: pink;
        width:300px;
        display: none;
    }
    #visibility{
        width:200px;
        height:100px;
        background: #eee;
        transition: all 2s;
    }
    #visibility:hover{
        visibility: hidden;
    }
    </style>
</head>
<body>
    <div id="display">display</div>
    <div id="visiblity">visibility</div>
</body>
</html>

这里写图片描述

Ⅰ当将鼠标移到灰块，2s后灰块消失，但是并没有渐变效果；
Ⅱ当将鼠标移到粉块，粉块直接消失（一闪一闪的效果）。

解释如下：

transition与visibility

①transition是支持visibility这个属性的；
②visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”；所以产生上述2S后消失但是无渐变的效果。
此外：

#visibility{

        width:200px;
        height:100px;
        background: #eee;
        visibility: hidden;
        transition: all 2s;
    }
#visibility:hover{
        visibility:visible;
    }

是不会产生预期的从无到有渐变的效果，由于visibility：hidden;使元素产生一个不可视的盒子无宽无高，无法与页面完成一些交互，如此例中的:hover，所以此情况一般用opacity来代替。

transition与display:none;

display:none无法应用transition效果,毕竟不支持啊。

animation与visibility

首先animation支持的属性表里是有visibility的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #vis{
        background: grey;
        width:200px;
        height:100px;
        visibility:hidden;
        animation: dis 1s;

    }

    @-webkit-keyframes dis{
        0%{visibility: hidden;}
        100%{visibility: visible;}
    }
    </style>
</head>
<body>
    <div id="vis">this is a box</div>

</body>
</html>

块vis 1S后消失？！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #vis{
        background: grey;
        width:200px;
        height:100px;
        visibility:visible;
        animation: vis 1s;

    }

    @-webkit-keyframes vis{
        from{visibility: hidden;}
        to{visibility: hidden;}
    }
    </style>
</head>
<body>
    <div id="vis">this is a box</div>

</body>
</html>

块vis 1S后显示？！

animation与display:none;

与transiton一样animation并不支持display:none;在这里啥效果也没有。

先做记录还有一些遗留问题待完善。

参考：
张鑫旭http://www.zhangxinxu.com/wordpress/2013/05/transition-visibility-show-hide/
来自stackoverflow http://stackoverflow.com/questions/7857982/css-visibility-animation-not-working

screaming_color

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transition/animation与visibility/display

①transition是支持visibility这个属性的；②visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”；所以产生上述2S后消失但是无渐变的效果。此外：
复制链接

扫一扫