transition失效问题
关于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失效问题的更多相关文章
- CSS魔法堂:Transition就这么好玩
前言 以前说起前端动画必须使用JS,而CSS3为我们带来transition和@keyframes,让我们可以以更简单(声明式代替命令式)和更高效的方式实现UI状态间的补间动画.本文为近期对Tran ...
- CSS3 Transitions 你可能不知道的知识点
如何临时让transition失效 我们给一个element设置了transition效果,但某些特殊情况,我们希望让transition临时失效.我们第一反应就是先移除transition设置,等其 ...
- css实现弹出框
弹出框也是前端里面经常使用的一个应用场景了,最开始想到的是用js实现这个效果,看到codepen上面有用css实现的.其实就是用到了css里面的一个:target选择器+visibility属性. U ...
- CSS3 transition-timing-function 深入理解和技巧
基础 语法: transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier( ...
- CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析
说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...
- js开关菜单
开关菜单 /* 将需要的信息添加到类的静态数组里备用 设置一个值openBool,默认为false:菜单默认display为none 点击时,如果目标元素是子元素,则不做开关菜单操作,直接return ...
- 第四十课:CSS3 transition详解
W3C中对transition是这样描述的:允许css的属性值在一定的时间内平滑的过渡,也就是说,以动画的效果改变css的属性值. transition主要包含4个属性值:transition-pro ...
- 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题
受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上 ove ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
随机推荐
- 安装VC6.0遇到的问题
1. 问题现象 安装VC6.0后,又安装了VS2005.用VC6.0打开以前的.dsw文件时,程序自动关闭.如下图所示. 具体操作是:选择一个.dsw文件,右键菜单[打开方式]中选择[Microsof ...
- ChemDraw 15出现安装异常如何处理
化学绘图软件ChemDraw最近更新了,更新后的是2015版本,ChemDraw Professional 15是其中组件之一.一些用户朋友在使用ChemDraw 15的过程中由于对软件的不了解往往会 ...
- 定位frame中的元素
场景 处理frame需要用到2个方法,分别是switch_to_frame(name_or_id_or_frame_element)和switch_to_default_content() 如何理解这 ...
- 深度强化学习资料(视频+PPT+PDF下载)
https://blog.csdn.net/Mbx8X9u/article/details/80780459 课程主页:http://rll.berkeley.edu/deeprlcourse/ 所有 ...
- 关于微信小程序的开发步骤
~~~~包子最近在研究小程序 首先先讲一下小程序一些基本的步骤: 1.登录微信的公众平台,选择小程序,注册一个账号,期间有碰到什么交300块钱的就不要理他,因为我只是做demo,当然,准备上线的企业啥 ...
- JS实现当鼠标移动到图片上时,时图片旋转
<div id="container" style="width:500px;height:400px;position:relative;margin:0 aut ...
- Hystrix参数说明
参数配置 参数说明 值 备注 groupKey productStockOpLog group标识,一个group使用一个线程池 commandKey addProductStockOpLog com ...
- iOS 成员变量和属性的区别
一. 成员变量 1.成员变量的作用范围: @public:在任何地方都能直接访问对象的成员变量 @private:只能在当前类的对象方法中直接访问,如果子类要访问需要调用父类的get/set方法 @p ...
- MySQL 中有关auto_increment及auto_increment_offset方面的介绍
数据库查询中,涉及到auto_increment中的参数变量一共有两个 [root@localhost][(none)]> show variables like 'auto_inc%'; +- ...
- (4.13)SQL Server profile使用、数据库优化引擎顾问使用
SQL Server profile使用技巧 介绍 经常会有人问profile工具该怎么使用?有没有方法获取性能差的sql的问题.自从转mysql我自己也差不多2年没有使用profile,忽然prof ...