.fade{
visibility: hidden;
opacity: ;
transition: all .5s;
}
.fade.on {
visibility: visible;
opacity: ;
}

原理:基于css3中的transition支持visibilibity这个特殊的非数值型过渡的属性,而且visibilibity:hidden虽占用空间,但完全不可见,不会影响当前位置的元素效果,完美解决使用display所存在的问题。

visibility过渡理解: 在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”

css3+visbibilty解决淡入淡出问题的更多相关文章

  1. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  2. 纯CSS3实现淡入淡出下拉菜单

    纯CSS3实现淡入淡出下拉菜单是一款比较简单清新的CSS3教程下拉菜单,这款下拉菜单是垂直方向的,点击主菜单项可以展开和折叠子菜单,在展开折叠的过程中伴随着淡入淡出的动画效果 源代码:http://w ...

  3. 给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 ...

  4. [Android]异步加载图片,内存缓存,文件缓存,imageview显示图片时增加淡入淡出动画

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3574131.html  这个可以实现ImageView异步加载 ...

  5. Unity3D 4.61 实现淡入淡出的场景过渡方法。

    还在学习过程中,如果有大大看到请指点. orz原来官方就有了更好的处理方法的教程,具体查看下面视屏. [Unity官方实例教程 秘密行动] Unity官方教程<秘密行动>(五) 屏幕渐变效 ...

  6. [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

    http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...

  7. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

  8. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  9. jQuery-4.动画篇---淡入淡出效果

    jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...

随机推荐

  1. int (*p)[10] 与*p[10]的区别

    定义指向具有10个整型元素的一维数组的指针格式为:int (*p)[10] ,而起初我一直以为int (*p)[10] 是定义二维数组的方法 ][],(*p)[]; p=a; /*有了这个定义后,指针 ...

  2. HTML input小结

    一.Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1.type=text 输入类型是text,这是我们 ...

  3. java基本数据类型

    基本数据类型概念 java是一种强类型语言,意味着必须为每一个变量声明一种数据类型. java拥有8中基本数据类型,主要包含如下:4中整形类型(long.int.short.byte)表示整形数值:两 ...

  4. PostgreSQL的.NET驱动程序Npgsql

    Npgsql是PostgreSQL的一个.NET数据提供程序,它可以自由获取.它可以通过下列选项获得独立的下载,也可以安装PostgreSQL数据库程序时选择安装. 最新的_npgsql2 Npgsq ...

  5. 程序员的经济学系列——你不可不知的生存智慧——第一篇:小X是要成为IT精英的男人!

    21世纪,不懂经济学就是耍流氓!如何才能生活得更好?作为程序员你一定也思考过这个问题.今天我们就来从经济学中寻找这问题的答案吧! 一·PPF与机会成本 1.PPF综述 首先为大家介绍第一个最简单的经济 ...

  6. 基于zookeeper实现统一资源管理

    分布式系统中经常涉及到配置资源的管理,比如,一个应用系统需要部署在多台服务器上,但是他们拥有某些的配置项是相同的,如果配置变更,需要修改这些配置,那么需要同时修改每台服务器,这样做比较麻烦而且容易出错 ...

  7. Apache Mina实战

    Mina介绍 Mina可以用于快速的开发基于网络通信的应用,特别是在开发手机端的游戏应用时,使用的较为普遍.本文简单介绍了一个用Mina搭建的一个简易讨论组,通过该应用可以对Mina的基本用法用途有个 ...

  8. 小型单文件NoSQL数据库SharpFileDB初步实现

    小型单文件NoSQL数据库SharpFileDB初步实现 我不是数据库方面的专家,不过还是想做一个小型的数据库,算是一种通过mission impossible进行学习锻炼的方式.我知道这是自不量力, ...

  9. Aspose.Words 16.8 破解版、添加自定义HTML导出Jpeg压缩质量配置

    0x01 Aspose.Words 介绍Aspose.Words是一个商业.NET类库,可以使得应用程序处理大量的文件任务.Aspose.Words支持Doc,Docx,RTF,HTML,OpenDo ...

  10. UIColor 使用起来的坑

    我们一般会用 UIColor 的RGB来生成颜色: [UIColor colorWithRed:220/255 green:220/255 blue:220/255 alpha:1.0];//这样生成 ...