xml地图|网站地图|网站标签 [设为首页] [加入收藏]
元素的几种方法的对比,层叠上下文
分类:web前端

CSS3 transition对这几种方法的影响

CSS3提供的transition极大地提高了网页动画的编写,但并不是每一种CSS属性都可以通过transition来进行动画的。我们修改代码如下:

JavaScript

<style> div { width: 100px; height: 100px; background: red; margin: 15px; padding: 10px; border: 5px solid green; display: inline-block; overflow: hidden; transition: all linear 2s; } </style> <div class="none"></div> <div class="hidden"></div> <div class="opacity0"></div> <div class="height0">aa</div> <script src="/Scripts/jquery-1.10.2.min.js"></script> <script> $(".none").on("click", function () { console.log("none clicked"); $(this).css("display", "none"); }) $(".hidden").on("click", function () { console.log("hidden clicked"); $(this).css("visibility", "hidden"); }) $(".opacity0").on("click", function () { console.log("opacity0 clicked"); $(this).css("opacity", 0); }) $(".height0").on("click", function () { console.log("height0 clicked"); $(this).css({ "height": 0, }); }) </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        margin: 15px;
        padding: 10px;
        border: 5px solid green;
        display: inline-block;
        overflow: hidden;
        transition: all linear 2s;  
    }
</style>  
 
<div class="none"></div>
<div class="hidden"></div>
<div class="opacity0"></div>
<div class="height0">aa</div>  
 
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(".none").on("click", function () {
    console.log("none clicked");
    $(this).css("display", "none");
})
$(".hidden").on("click", function () {
    console.log("hidden clicked");
    $(this).css("visibility", "hidden");
})
$(".opacity0").on("click", function () {
    console.log("opacity0 clicked");
    $(this).css("opacity", 0);
})
$(".height0").on("click", function () {
    console.log("height0 clicked");
    $(this).css({
        "height": 0,
    });
})
</script>

经过测试,可以看到:
1、display:none:完全不受transition属性的影响,元素立即消失
2、visibility:hidden:元素消失的时间跟transition属性设置的时间一样,但是没有动画效果
3、opacity和height等属性能够进行正常的动画效果

假设我们要通过CSS3来做一个淡出的动画效果,应该如下:

.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; } .fadeOut:hover { visibility: hidden; opacity: 0; }

1
2
.fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
     .fadeOut:hover { visibility: hidden; opacity: 0; }

应该同时设置元素的visibility和opacity属性。

什么是 CSS 层叠上下文,它们是如何工作的?

2016/02/24 · CSS · 层叠上下文

本文由 伯乐在线 - EricHedgedog 翻译,JustinWu 校稿。未经许可,禁止转载!
英文出处:Tiffany B. Brown。欢迎加入翻译组。

CSS层叠上下文给很多开发者都带来过困扰。在我写完《CSS Master》中的布局章节之前,我都不能说自己已经完全理解了它们。当然了,我理解元素的 z-index 属性是需要 position 属性不为 static 时才能生效的,但这也是在我读了无数次Philip Walton 的《没有人告诉你关于 Z-Index 的一些事》之后才理解了。

没有冒犯 Philip 的意思。就像我说过的:层叠上下文很棘手。

那什么是层叠上下文呢?层叠上下文就是一个包含了一组堆叠层的元素。这可以是一个 html 元素创建的根层叠上下文,或者是一个由特定属性和值创建的局部层叠上下文。

“包含一堆层”是一个很奇怪的短语,但这是一个简单的概念。在一个局部层叠上下文中,子元素的z-index 会根据其父元素来设置而不是文档的根元素。在该上下文以外的层(例如:一个局域层叠上下文的相邻同级元素)不能位于其内部层之间。

这儿是一个例子。使用切换按钮来为 A 元素触发或者取消一个局域层叠上下文。

图片 1

图片 2

在这个例子中,#a p 元素(A的子元素) 的z-index为1 ,#a 元素和 #b 元素的z-index值为auto 。因为 #a p 元素的 z-index 属性值为正数,所以在根层叠上下文内该元素位于 #a 元素和 #b 元素之上。

然而把 #a 元素的 transform 属性值由 none 改为 scale(1) 会触发一个局域层叠上下文。现在 #a p 元素的 z-index 值会根据 #a 元素来计算而不是文档的根元素。

无论是根层叠上下文还是局域层叠上下文都会遵循一系列的规则来确定元素的堆叠和绘制顺序,一个层叠上下文的子元素会按照从下到上的顺序绘制。

  1. 堆叠层级为负数的元素,通常为 z-index:-1 的元素 。
  2. position 属性值为 static 的元素。
  3. 堆叠层级为 0 的元素,通常为 z-index:auto 的元素。
  4. 堆叠层级为正数的元素,例如 z-index 属性值为 1 或者更大的元素。

如果两个元素有相同的堆叠层级,就按照它们在源文件中出现的顺序层叠。后继元素堆叠在前驱元素之上。

少数的 CSS 属性和值会触发一个新的层叠上下文。它们包含: opacity 属性,当它的属性值小于 1 时(例如:.99);
filter 属性,当它的属性值不为 none 时;CSS 混合模式属性 mix-blend-mode, 当它的属性值不为 normal 时。

和你猜想的一样,transform 属性能够触发一个层叠上下文,但是仅当它的属性值不为 none 时。这包含了身份转换[1] ,例如属性值为 scale(1) 和 translate3d(0,0,0) 。

在上述例子中,#a 元素和 #b 元素拥有相同的堆叠层级,但是 #b 元素是源文件中的第二个元素。当 transform: scale(1) 被应用时, #a p 变为包含在 #a 元素的局部上下文中。结果是,#b 元素上升到了堆栈的最上面。

[1] 身份转换对元素没有视觉上的影响,但是会触发一个新的层叠上下文。

打赏支持我翻译更多好文章,谢谢!

打赏译者

延伸阅读

目前我们在大部分新项目的生产环境中使用Hapi with generators ,同时也使用 Koa。

1 赞 收藏 评论

display:none

设置元素的display为none是最常用的隐藏元素的方法。

CSS

.hide { display:none; }

1
2
3
.hide {
     display:none;
}

将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

图片 3 图片 4

1 赞 2 收藏 评论

Promises

当今JavaScript的Promise规范可以追溯到2012年,从ES6时可以使用——然而Promises并非从JavaScript社区诞生。这个词于1976年来自 Daniel P. Friedman 。

promise代表异步操作的最终结果。

以前关于Promises的示例看起来像这样:

JavaScript

Something.save() .then(function() { console.log('success'); }) .catch(function() { //error handling })

1
2
3
4
5
6
7
Something.save()  
  .then(function() {
    console.log('success');
  })
  .catch(function() {
    //error handling
  })

你会注意到,Promises理所当然地使用了回调。then 和 catch 注册的回调函数要么由异步操作结果触发,要么当无法满足预期条件时调用。Promises的另一个优点是可以链式操作:

JavaScript

saveSomething() .then(updateOtherthing) .then(deleteStuff) .then(logResults);

1
2
3
4
saveSomething()  
  .then(updateOtherthing)
  .then(deleteStuff)  
  .then(logResults);

在使用Promises时你可能需要在不支持它的运行环境中使用polyfills。一个受欢迎的选择是使用bluebird。这些库可以提供比原生更多的功能,特别是在Promises/A+规范提供的特性受到限制的情况下。

但是你为什么不使用sugar方法?请读 Promises: 扩展的问题。了解Promises的更多信息,请参阅 Promises/A+ 规范。

你可能会问:当大部分库只仅仅公开一个回调接口时,我如何使用Promises?

这很简单——你唯一要做的就是使用一个Promise封装原始的回调函数,像这样:

JavaScript

function saveToTheDb(value) { return new Promise(function(resolve, reject) { db.values.insert(value, function(err, user) { // remember error first ;) if (err) { return reject(err); // don't forget to return here } resolve(user); }) } }

1
2
3
4
5
6
7
8
9
10
function saveToTheDb(value) {  
  return new Promise(function(resolve, reject) {
    db.values.insert(value, function(err, user) { // remember error first ;)
      if (err) {
        return reject(err); // don't forget to return here
      }
      resolve(user);
    })
  }
}

一些库、框架已经都已经支持,提供一个回调和同时提供Promise接口。如果你今天创建了一个库,同时支持回调和Promise接口是一种很好的实践。你可以很容易地这样做:

JavaScript

function foo(cb) { if (cb) { return cb(); } return new Promise(function (resolve, reject) { }); }

1
2
3
4
5
6
7
8
function foo(cb) {  
  if (cb) {
    return cb();
  }
  return new Promise(function (resolve, reject) {
 
  });
}

甚至更简单,你可以选择从一个仅支持Promise的接口开始,并通过工具提供向后兼容,比如callbackify。Callbackify基本上做了和之前显示的代码片段相同的工作,但方法更简单。

opacity:0

opacity属性我相信大家都知道表示元素的透明度,而将元素的透明度设置为0后,在我们用户眼中,元素也是隐藏的,这算是一种隐藏元素的方法。

.transparent { opacity:0; }

1
2
3
.transparent {
     opacity:0;
}

这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间,但我们都知道,设置透明度为0后,元素只是隐身了,它依旧存在页面中。

关于作者:EricHedgedog

图片 5

前端攻城狮 个人主页 · 我的文章 · 17 ·  

图片 6

异步JavaScript进化史

2015/10/14 · CSS

本文由 伯乐在线 - cucr 翻译,唐尤华 校稿。未经许可,禁止转载!
英文出处:Gergely Nemeth。欢迎加入翻译组。

async函数近在眼前,但这经过了很长的旅程。不久前我们还在写回调,接着是Promise/A+规范,之后出现 generator函数,现在是async函数。

让我们回头看看异步JavaScript在这些年是如何发展的。

visibility:hidden

设置元素的visibility为hidden也是一种常用的隐藏元素的方法,和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。

.hidden{ visibility:hidden }

1
2
3
.hidden{
     visibility:hidden
}

visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景

Generators、yield函数

JavaScript Generators是一个相对较新的概念,他们从ES6(也称为ES2015)引入。

是不是很好,当你执行你的函数时,可以在任何时候暂停,计算其他东西,做其他事情,然后返回,带一些返回值并继续?

这正是generator函数为你做的。当我们调用generator函数时它并不会开始运行,我们需要手工迭代。

JavaScript

function* foo () { var index = 0; while (index &lt; 2) { yield index++; } } var bar = foo(); console.log(bar.next()); // { value: 0, done: false } console.log(bar.next()); // { value: 1, done: false } console.log(bar.next()); // { value: undefined, done: true }

1
2
3
4
5
6
7
8
9
10
11
function* foo () {  
  var index = 0;
  while (index &amp;lt; 2) {
    yield index++;
  }
}
var bar =  foo();
 
console.log(bar.next());    // { value: 0, done: false }  
console.log(bar.next());    // { value: 1, done: false }  
console.log(bar.next());    // { value: undefined, done: true }

如果你想更容易地使用generator编写异步JavaScript,你将需要co。

Co是基于generator的控制流,对Node.js和浏览器都适用 style="color: #ff0000">。使用promises,可以让你用更好地方式编写非阻塞代码。

使用co,我们之前的例子可能看起来像这样:

JavaScript

co(function* (){ yield Something.save(); }).then(function() { // success }) .catch(function(err) { //error handling });

1
2
3
4
5
6
7
8
co(function* (){  
  yield Something.save();
}).then(function() {
  // success
})
.catch(function(err) {
  //error handling
});

你可能会问:并行操作运行会怎么样?答案可能比你想象的更简单(在底层它只是Promise.all):

JavaScript

yield [Something.save(), Otherthing.save()];

1
yield [Something.save(), Otherthing.save()];

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:元素的几种方法的对比,层叠上下文

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文