概述

css不能在display:none和display:block之间进行动画,并且也不能在height:0和height:auto之间进行动画。这里我研究了一下在display:none和display:block之间进行动画的解决方案,记录下来供以后开发时参考,相信对其他人也有用。

参考资料:

CSS3 Animation and Display None

解决transition动画与display冲突的几种方法

机制

我的理解是这样的:由于display:none会引起页面的重绘事件,所以它是一个异步的延时事件,所以浏览器其实会先解析animate的代码,然后再执行display:none。

这样就引发了一个问题:如果我们要设置类似淡入淡出的效果怎么办?就是让元素在消失/出现的同时产生动画怎么办?这里我研究了2个解决方案。

利用绝对定位和visiblity

不利用display:none,而是利用它的替代方式:

opacity: 0;
visibility: hidden;

但是这样会占据空间。如果不想占据空间的话,只能使用绝对定位,把元素独立出去。这个时候会有一个层叠问题,所以需要搭配z-index控制层叠关系使它出现或者消失。

示例如下:

//自身css效果
.animate {
position: absolute;
top: 0;
left: 0; transition: 1s;
opacity: 0;
visibility: hidden;
z-index: 0;
} //出现时的效果
.cur {
opacity: 1;
visibility: visible;
z-index: 10;
}

利用timeout

jquery里面也有淡入淡出的方法,它是怎么实现的呢?通过查资料可以知道,它是通过deferred对象通过延时display: none来实现的。好处是能够适用于出现时占据空间,消失时又不占据空间的情况。实例如下:

//css
.div {
display: none;
}
.div-animate1 {
display: block;
visibility: hidden;
opacity: 0;
transform: translate3d(100px, 0, 0);
transition: 1s;
}
.div-animate2 {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
} //js
function divAnimate1($div, divClass1, divClass2) {
$div.addClass(divClass1); setTimeout(function(){
$div.addClass(divClass2);
});
}
function divAnimate2($div, divClass1, divClass2) {
$div.removeClass(divClass2); setTimeout(function(){
$div.removeClass(divClass1);
}, 1000); //1s是动画时间。
}

其它

我还试过用transitionend事件,window.requestanimationframe来实现,但是都或多或少的有副作用。

另外总结一下:

  1. 如果消失前后都需要占据空间,则用visiblity。
  2. 如果消失前后都不需要占据空间,则用绝对定位和visiblity。
  3. 如果消失前需要占据空间但是消失后不需要占据空间,则用timeout和visiblity。

css3 动画与display:none冲突的解决方案的更多相关文章

  1. css3动画:transition和animation

    概述 之前写过css3 动画与display:none冲突的解决方案,但是最近却发现,使用animation效果比transition好得多,而且不和display:none冲突.下面我把相关新的记录 ...

  2. 解决transition动画与display冲突的几种方法

    如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...

  3. CSS3 动画卡顿性能优化解决方案--摘抄

    最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区, ...

  4. 用CSS3动画,让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  5. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  6. 给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下

    问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animati ...

  7. 美妙的 CSS3 动画!一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  8. css3动画导航实现

    代码 <!DOCTYPE html> <!-- saved from url=(0223)file:///C:/Users/user/AppData/Local/Temp/HZ$D. ...

  9. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

随机推荐

  1. Python常用内置函数介绍

    Python提供了一个内联模块buildin.内联模块定义了一些开发中经常使用的函数,利用这些函数可以实现数据类型的转换.数据的计算.序列的处理等功能.下面将介绍内联模块中的常用函数. Python内 ...

  2. phpstorm 不能自动打开上次的历史文件

    问题产生的原因:可能是电脑非正常关机,导致phpstrom 无法正常关闭. 一开始我以为是配置上那里出现了问题,所以直接就把配置删除了,然后生成了默认配置.发现还是无法解决问题.然后一个个配置查阅过去 ...

  3. zabbix安装脚本

    #!/bin/bash # #安装zabbix源.aliyun YUM源 #curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyu ...

  4. Ansible运维工具

    1.Ansible是一款极为灵活的开源工具套件,能够大大简化Unix管理员的自动化配置管理与流程控制方式.可以通过命令行或者GUI来使用Ansible,运行Ansible的服务器这里俗称“管理节点”: ...

  5. NodeJs命令

    cd命令,就是change directory的缩写,表示更改当前目录 cls命令,清屏.清屏幕命令(CLS,CLear Screen) tab键,自动补全. 上键,提示最近的命令   在cmd窗口 ...

  6. 49-Python 安装pythoncom库和pyHook

    这个直接用pip不行,所以借鉴了别人的方法: YTouchCoder 1. https://sourceforge.net/projects/pywin32/files/pywin32/ 这里面下载p ...

  7. (十)创建ROS消息和ROS服务

    ROS总教程(中文版) 110.创建ROS消息和ROS服务

  8. sqlplus中设定行大小、页大小、字符列格式、数字列格式、清屏

    sqlplus虽然是DBA们最为经常使用的Oracle客户端工具,但是它在输出结果格式化上不是很好,如折行.分页不好等,所以一般启动sqlplus后多少都要做些设置,如linesize.pagesiz ...

  9. JavaSE基础知识(2)—变量和运算符

    一.变量 1.理解 概念:内存中的一块数据存储空间 2.变量的三要素 数据类型变量名变量值 3.变量的语法和使用步骤★ 步骤1:声明变量(计算机开辟一块空间) 数据类型 变量名;步骤2:为变量赋值(初 ...

  10. PHP开发——常量

    概念 l  常量就是值永远不变的量.如:圆周率.身份证号码等. l  所谓常量值永远不变的量,是指在一次完整的HTTP请求过程中. l  常量在程序运行过程中,不能修改.也不能删除. l  常量比变量 ...