相信大家在试用css3动画时候一定用过transition属性,相对于js动画来说用起来更快速简单。
代码如下:
HTML结构:
1
2
|
<div
id
=
"box"
>
</div>
<button>
动画按钮
</button>
|
CSS代码:
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代码
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代码:
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代码
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代码如下
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时碰到的坑。
原文出处: 携程设计委员会