关于transition，css教程中有一个很简单的例子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .a {

                transition: opacity .5s;

                overflow: hidden;

                display: block;

            }

            .a:hover {

                opacity: 0;

            }

        </style>

    </head>

    <body>

        <div class="a">testtesttesttesttesttesttesttesttest</div>

    </body>

</html>

当鼠标悬浮于div上时，会渐变消失

但当opacity改为width，或者height时，过渡却不会发生！后来发现当改变width、height等时必须预先设定其高/宽，否则过渡失效！　　

<!DOCTYPE html>
<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .a {
　　　　　　　　　　/*必须预先设定*/
                width: 200px;

                transition: width 2s;

                overflow: hidden;

                display: block;

            }

            .a:hover {

                width: 0;

            }

        </style>

    </head>

    <body>

        <div class="a">testtesttesttesttesttesttesttesttest</div>

    </body>

</html>

transition失效问题的更多相关文章

  1. CSS魔法堂：Transition就这么好玩

    前言  以前说起前端动画必须使用JS,而CSS3为我们带来transition和@keyframes,让我们可以以更简单(声明式代替命令式)和更高效的方式实现UI状态间的补间动画.本文为近期对Tran ...

  2. CSS3 Transitions 你可能不知道的知识点

    如何临时让transition失效 我们给一个element设置了transition效果,但某些特殊情况,我们希望让transition临时失效.我们第一反应就是先移除transition设置,等其 ...

  3. css实现弹出框

    弹出框也是前端里面经常使用的一个应用场景了,最开始想到的是用js实现这个效果,看到codepen上面有用css实现的.其实就是用到了css里面的一个:target选择器+visibility属性. U ...

  4. CSS3 transition-timing-function 深入理解和技巧

    基础 语法: transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier( ...

  5. CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析

    说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...

  6. js开关菜单

    开关菜单 /* 将需要的信息添加到类的静态数组里备用 设置一个值openBool,默认为false:菜单默认display为none 点击时,如果目标元素是子元素,则不做开关菜单操作,直接return ...

  7. 第四十课：CSS3 transition详解

    W3C中对transition是这样描述的:允许css的属性值在一定的时间内平滑的过渡,也就是说,以动画的效果改变css的属性值. transition主要包含4个属性值:transition-pro ...

  8. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

  9. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

随机推荐

  1. redhat ent 6.5 virtualbox虚拟机通过桥接方式配置主机-虚拟机的局域网

    感谢: http://www.linuxidc.com/Linux/2012-06/62544.htm http://www.2cto.com/os/201204/126178.html Virual ...

  2. springmvc 生命周期

    1A)客户端发出http请求,只要请求形式符合web.xml 文件中配置的*.action的话,就由DispatcherServlet 来处理. 1B)DispatcherServlet再将http请 ...

  3. C++ 矩阵计算库 :Eigen库

    Eigen http://eigen.tuxfamily.org/index.php?title=Main_Page 下载http://bitbucket.org/eigen/eigen/get/3. ...

  4. 添加可点击的imagebottom，有个点击动画效果

    android添加可点击的按钮,有个动画切换 ,首先定义一个 res/drawable中定义一个 btn_shutter_background.xml,其定义举例如下: <?xml versio ...

  5. ios 制作自已的framework

    本文转载至 http://blog.csdn.net/chen505358119/article/details/9190731   ios中我们写的代码有时不愿意让别人看到,可能对它进行封装,生成一 ...

  6. ios数据存储方式FMDB

    本文转载至 http://blog.csdn.net/chen505358119/article/details/9289489 分类: ios2013-07-10 14:05 2471人阅读 评论( ...

  7. Rikka with Subset

    Rikka with Subset Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  8. 超哥mysql数据库部分blog整理:

    总目录:mysql数据库阶段学习目录 https://www.cnblogs.com/clschao/articles/10065275.html Day1. 1.数据库初识 https://www. ...

  9. Pycharm中目前用到的快捷键

    1.批量注释:Ctrl+/ 2.缩进\不缩进:Tab\Shift+Tab 3.运行:Ctrl+Shift+F10 4.撤销\反撤销:Ctrl+z\Ctrl+shift+z 5.当光标在代码中间,如何回 ...

  10. crontab 问题分析 - CSDN博客 https://blog.csdn.net/tengdazhang770960436/article/details/50997297

    cd /mnt/tools/trunk/plugins/personas; python update_keywords.py crontab 问题分析  crontab 问题分析 - CSDN博客 ...