关于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. Muduo网络库源代码分析（六）TcpConnection 的生存期管理

    TcpConnection是使用shared_ptr来管理的类,由于它的生命周期模糊.TcpConnection表示已经建立或正在建立的连接.建立连接后,用户仅仅须要在上层类如TcpServer中设置 ...

  2. poj 1041(欧拉回路+输出字典序最小路径)

    题目链接:http://poj.org/problem?id=1041 思路:懒得写了,直接copy吧:对于一个图可以从一个顶点沿着边走下去,每个边只走一次,所有的边都经过后回到原点的路.一个无向图存 ...

  3. 41个Web开发者必须收藏的JavaScript实用技巧

    1. 将彻底屏蔽鼠标右键 oncontextmenu=”window.event.returnValue=false” < table border oncontextmenu=return(f ...

  4. easyui datagrid加载数据的两种方式

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

  5. 双基准快速排序（Dual-Pivot Quicksort）（转）

    课本上常见的快速排序都是选择一个枢纽元(Pivot),基于这个枢纽元从前后双向扫描分成大于枢纽元和小于枢纽元的.而从JDK 7开始,java.util.Arrays.sort()使用双基准快速排序(D ...

  6. JavaScript的BOM和DOM

    JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...

  7. 3673: 可持久化并查集 by zky

    3673: 可持久化并查集 by zky Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 2170  Solved: 978[Submit][Status ...

  8. cocos2d-x设计模式发掘之一：单例模式

       作者: firedragonpzy  原地址:http://www.firedragonpzy.com.cn/index.php/archives/1781 本系列文章我将和大家一起来发掘coc ...

  9. Carries

    Carries frog has nn integers a1,a2,…,ana1,a2,…,an, and she wants to add them pairwise. Unfortunately ...

  10. H - N皇后问题

    H - N皇后问题 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Descripti ...