关于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. Java连接Sql Server 2008的简单数据库应用

    1.从微软官网下载JDBC驱动包 sqljdbc_4.0.2206.100_chs.exe,双击解压文件到指定目录,我的指定目录是: C:\Program Files\Microsoft JDBC D ...

  2. openCV中 libopencv-nonfree-dev的安装: undefined reference to `cv::initModule_nonfree()&#39;

    今天照着一起做RGB-D SLAM (3)    , 程序会出现以下的错误: cv::initModule_nonfree(); /home/yhzhao/slam/src/detectFeature ...

  3. python3----函数(join)

    今天写python 100例时,有个题目是大致是这样的:已知输入形式是1+3+2+1,要求输出形式为1+1+2+3 一开始思路是将输入的字符串用split()函数划分成数组,在对数组进行排序,再用fo ...

  4. python:编写行政区域三级菜单(day 1)

    地区分三层结构例如: 大中华地区一级划分: 华东 华中 华北 西南 特别行政区 华南 ------------------------------------------------- 请输入你要查看 ...

  5. 【Android 多语言切换简单实例分享】

    一.Android多语言切换 Android应用的开发不可能仅仅针对某一个国家或者区域使用,各国间语言文化各不同样,因此一个优秀的APP必须支持多种语言,为了实现这个特性,Android给出了一个解决 ...

  6. centos6.4下安装mysql5.7.18

    1.安装前工作 在安装前需要确定现在这个系统有没有 mysql,如果有那么必须卸载(在 centos7 自带的是 mariaDb 数据库,所以第一步是卸载数据库). 卸载系统自带的Mariadb: 查 ...

  7. 【BZOJ2482】[Spoj1557] Can you answer these queries II 线段树

    [BZOJ2482][Spoj1557] Can you answer these queries II Description 给定n个元素的序列. 给出m个询问:求l[i]~r[i]的最大子段和( ...

  8. NodeJS版本EasyDarwin开源流媒体服务器开发心得

    title: Node版本EasyDarwin开发心得 date: 2018-03-27 22:46:15 tags: 年后着手Node版本EasyDarwin的开发工作,截止到今天2018年03月2 ...

  9. getParameterMap的使用

    就是前端提交到Servlet或者Action里面的参数Map哈,如果你是以表单提交,那么request.getParameterMap()中将包含你表单里面所有input标签的数据,以其name为ke ...

  10. 【转】Gacutil.exe（全局程序集缓存工具）

    全局程序集缓存工具使您可以查看和操作全局程序集缓存和下载缓存的内容. 安装 Visual Studio 和 Windows SDK 时会自动安装此工具. 要运行工具,我们建议您使用 Visual St ...