关于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. chrono

    时间段的表示 tmplate<class Rep,class Period=ratio<1>> class duration; duration类被用来表示时间段的计量器,Re ...

  2. SQL2008删除大量数据

    常见问题:工作中数据库难免产生大量的日志,而用户可能关心的只有最近一个月左右的,这些日志占用了服务器磁盘,还可能影响了服务运行效率.甚至在数据库迁移时更因为体积而带来巨大麻烦. 那么,在需要时,删除不 ...

  3. ios --跳转到支付宝

    //跳转到支付宝 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request nav ...

  4. HTML5的兴起与4G网络的出现，能否够终止移动端的持续下滑走向

    HTML5的兴起与4G网络的出现,能否够终止移动端的持续下滑走向. 每当大家谈起互联网的未来的时候,多半谈及的是云.大数据.SAAS.仿佛要将一切摒弃.而当谈起移动互联网的时候.却坚持觉得NATIVE ...

  5. 利用.Net中Process类调用netstat命令来判断计算端口的使用情况

    利用.Net中Process类调用netstat命令来判断计算端口的使用情况: Process p = new Process();p.StartInfo = new ProcessStartInfo ...

  6. java MD5工具类

    package com.common.tools; import java.security.MessageDigest; /** * MD5加密工具类 * <功能详细描述> * * @a ...

  7. 使用spring+quartz配置多个定时任务

    Spring被用在了越来越多的项目中, quartz也被公认为是比较好用的定时器设置工具, 在这里通过一个demo说明如何使用spring和quartz配置多个定时任务. 环境: eclipse + ...

  8. 【BZOJ1731】[Usaco2005 dec]Layout 排队布局 差分约束

    [BZOJ1731][Usaco2005 dec]Layout 排队布局 Description Like everyone else, cows like to stand close to the ...

  9. 【转】.Net 程序集 签名工具sn.exe 密钥对SNK文件 最基本的用法

    阐述签名工具这个概念之前,我先说说它不是什么: 1.它不是用于给程序集加密的工具,它与阻止Reflector或ILSpy对程序集进行反编译一毛钱关系都没有. 2.它很讨厌人们把它和加密联系在一起. 我 ...

  10. amortized analysis

    w https://en.wikipedia.org/wiki/Amortized_analysis In computer science, amortized analysis is a meth ...