当transition遇上display

2016/01/13 · CSS · 5
评论
·
display,
transition

原文出处:
携程设计委员会   

相信大家在试用css3动画时候一定用过transition属性,相对于js动画来说用起来更快速简单。
代码如下:
HTML结构:

XHTML

<div id=”box”></div> <button>动画按钮</button>

1
2
<div id="box"></div>
<button>动画按钮</button>

CSS代码:

CSS

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px
auto; transition: all .4s linear; /*display: block;*/ } .hidden {
/*display: none;*/ opacity: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    /*display: block;*/
}
 
.hidden {
    /*display: none;*/
    opacity: 0;
}

JS代码

威尼斯人线上娱乐,JavaScript

var box = $(‘#box’); $(‘button’).on(‘click’, function () {
if(box.hasClass(‘hidden’)){ box.removeClass(‘hidden’); }else{
box.addClass(‘hidden’); } });

1
2
3
4
5
6
7
8
var box = $(‘#box’);
$(‘button’).on(‘click’, function () {
    if(box.hasClass(‘hidden’)){
        box.removeClass(‘hidden’);
    }else{
        box.addClass(‘hidden’);
    }
});

在点击按钮后可以看到淡入淡出的动画效果,但是在css代码中解除对于display属性的两段注释以后,再打开浏览器一看,淡入淡出的效果全没了。
这简直是破坏性的作用,然后我度娘了一下总结了几个方法。

第一种方法:将display用visibility来替代,大家都知道visibility的效果其实跟display在一定程度上相似,那为什么说只是一定程度上相似呢,因为它仍然是占空间的,那你一定会说,这么用跟opacity没啥区别呀。但却可以避免遮挡下面的层比如按钮的点击事件。

第二种方法是相对于第一种方法的进阶,利用了js的setTimout和transitionend事件
css代码 将class hidden类中的opacity分离出来

CSS代码:

CSS

.box { background: goldenrod; width: 300px; height: 300px; margin: 30px
auto; transition: all .4s linear; visibility: visible; } .hidden {
display: none; } .visuallyhidden { opacity: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    visibility: visible;
}
.hidden {
    display: none;
}
.visuallyhidden {
    opacity: 0;
}

js代码

JavaScript

var box = $(‘#box’); $(‘button’).on(‘click’, function () { if
(box.hasClass(‘hidden’)) { box.removeClass(‘hidden’);
setTimeout(function () { box.removeClass(‘visuallyhidden’); }, 20); }
else { box.addClass(‘visuallyhidden’); box.one(‘transitionend’,
function(e) { box.addClass(‘hidden’); }); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var box = $(‘#box’);
$(‘button’).on(‘click’, function () {
    if (box.hasClass(‘hidden’)) {
        box.removeClass(‘hidden’);
        setTimeout(function () {
            box.removeClass(‘visuallyhidden’);
        }, 20);
    } else {
        box.addClass(‘visuallyhidden’);
        box.one(‘transitionend’, function(e) {
            box.addClass(‘hidden’);
        });
    }
});

第三种方法与第二种方法类似,用requestAnimationFrame来取代setTimeout,相应的修改了if条件里的js。
requestAnimationFrame其实也就跟setTimeout/setInterval差不多,通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。

js代码如下

JavaScript

var box = $(‘#box’); $(‘button’).on(‘click’, function () { if
(box.hasClass(‘hidden’)) { box.removeClass(‘hidden’);
requestAnimationFrame(function(){ box.removeClass(‘visuallyhidden’); });
} else { box.addClass(‘visuallyhidden’); box.one(‘transitionend’,
function(e) { box.addClass(‘hidden’); }); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var box = $(‘#box’);
$(‘button’).on(‘click’, function () {
    if (box.hasClass(‘hidden’)) {
        box.removeClass(‘hidden’);
        requestAnimationFrame(function(){
            box.removeClass(‘visuallyhidden’);
        });
    } else {
        box.addClass(‘visuallyhidden’);
        box.one(‘transitionend’, function(e) {
            box.addClass(‘hidden’);
        });
    }
});

以上就是当transition遇上display时碰到的坑。

1 赞 5 收藏 5
评论

威尼斯人线上娱乐 1

CSS“隐藏”元素的几种方法的对比

2016/02/16 · CSS ·
隐藏

原文出处:
狼狼的蓝胖子(@狼狼的蓝胖子)   

一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none。这是最为人所熟知也是最常用的方法。我相信还有不少人想到使用设置visibility为hidden来隐藏元素,这种方式也是常用的方法,而且也有很多人知道两者的不同。除了这两种方法,本文还总结了一些比较不常用的方法,比较了这几种“隐藏”元素方法的区别和优缺点,欢迎大家交流!!

几种方法的简单介绍

首先我们分别来说说到底有哪几种隐藏元素的方法,有一些方法是众所周知的,还有一些算是一种技巧。

display:none

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

CSS

.hide { display:none; }

1
2
3
.hide {
     display:none;
}

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

visibility:hidden

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

.hidden{ visibility:hidden }

1
2
3
.hidden{
     visibility:hidden
}

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

opacity:0

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

.transparent { opacity:0; }

1
2
3
.transparent {
     opacity:0;
}

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