摘要:应用场景用户上传头像,实时显示并裁减实现方式模块外部容器设置,剪裁区域里面放一个加载效果,设置。图片尺寸获取成功后,再正常初始化,然后让外部容器属性重置为。这样体验就会好很多,用户只会看到加载中剪裁界面,而不是占位界面加载中最终操作界面。
一、Display 几种隐藏方式
使用标签:
获取标签隐藏的内容:
script.innerHTML
使用display:none隐藏
.hidden { position: absolute; visibility: hidden; }
visibility:hidden
.clip { position: absolute; clip: rect(0 0 0 0); // clip 属性剪裁绝对定位元素,唯一合法的形状值是:rect (top, right, bottom, left) } .out { position: relative; left: -999em; }
.lower { position: relative; z-index: -1; }
.opacity { position: absolute; //position的作用是使元素脱离文档流,使其不占据空间 opacity: 0; filter: Alpha(opacity=0); }
.opacity { opacity: 0; filter: Alpha(opacity=0); }
Display:none显示隐藏不会影响animation动画,但是会影响transition过渡效果的执行,所以transition往往和visibility搭配
二、Visibility与元素的隐显父元素设置 visibility:hidden,子元素也会看不见,究其原因是继承性,子元素继承了 visibility:hidden,但是,如果子元素设置了 visibility:visible,则子元素又会显示出来,这个和 display 隐藏有着质的区别。
应用场景: 用户上传头像,实时显示并裁减
实现方式: 模块外部容器设置 visibility:hidden,剪裁区域里面放一个加载效果,设置visibility:visible。图片尺寸获取成功后,再正常初始化,然后让外部容器 visibility 属性重置为 visible。这样体验就会好很多,用户只会看到“加载中→剪裁界面”,而不是“占 位界面→加载中→最终操作界面”。
visibility:hidden 不会影响计数器的计数
hover属性下,下述代码会在hover时显示target子元素,但是不会有过渡效果
.box > .target { display: none; position: absolute; opacity: 0; transition: opacity .25s; } .box:hover > .target { display: block; opacity: 1; }
下面的代码可以实target子元素现淡入淡出的过渡效果,这是由于CSS3 transition支持的CSS属性中有visibility,但是并没有 display。
.box > .target { position: absolute; opacity: 0; transition: opacity .25s; visibility: hidden; } .box:hover > .target { visibility: visible; opacity: 1; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114253.html
摘要:元素层叠顺序补充说明位于最下面的特指层叠上下文元素后面会详解的边框和背景色。界中可能有其他的层叠结界,而自身也可能处于其他层叠结界中。 上一篇:《CSS世界》笔记四:流的保护与破坏 写在前面 《CSS世界》这本书还剩六章,但是这本书的精华部分主要是前面的内容,这里仅把后面章节相对重要的内容以博客展示,想着了解更多的小伙伴还是去阅读原文的好,毕竟三百多页的一本书并不是小小几篇博客能完全说...
摘要:和可以看作是同父异母的兄弟关系。例子如下结果如下而父元素设置属性的方式则是利用了的特性下面将会详细讲解结界全称为,中文为块级格式化上下文。 上一篇:《CSS世界》笔记三:内联元素与对齐下一篇:《CSS世界》笔记五:CSS层叠规则及元素隐藏 写在前面 原本博客名为浮动与定位,但是《CSS世界》第六章节的内容不仅有浮动定位,很大一部分篇幅都在讲BFC和overflow。更吸引人的是,作者将...
摘要:要实现这一点,必须规定两项内容指定要添加效果的属性指定效果的持续时间。当动画完成后,保持最后一个属性值在最后一个关键帧中定义。在所指定的一段时间内,在动画显示之前,应用开始属性值在第一个关键帧中定义。 1.前言 css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得css3不难,但...
摘要:目前在前端开发所占的比重越来越高,在我们学习和开发的过程中都会去使用。下面把程序员雷雪松对的知识点总结和归纳分享给大家。过滤对同胞元素的搜索。将匹配元素集合缩减为集合中的最后一个元素。返回指定元素相对于其他指定元素的位置。 jQuery目前在Web前端开发所占的比重越来越高,在我们jQuery学习和开发的过程中都会去使用。jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原...
阅读 1961·2019-08-30 15:54
阅读 3513·2019-08-30 15:52
阅读 1806·2019-08-29 17:20
阅读 2465·2019-08-29 17:08
阅读 2320·2019-08-26 13:24
阅读 753·2019-08-26 11:59
阅读 2763·2019-08-23 14:50
阅读 589·2019-08-23 14:20