更新时间:2018年01月05日13时21分 来源: 浏览次数:
1、过渡效果的基础知识
问题1:在原生的html中,如何实现一个元素的过渡效果?
答:在原生的html中,如果要让一个元素实现过渡效果,那么我们需要做一件事情,给这个元素设置一个css样式,transition,例如:
在上面的代码中,transition的值为 width 2s linear ,它分别代表了3个方面的设置。
第一个:width,代表了当这个div的宽度width这个属性,只要这个值发生了改变,那么就会有过渡效果。
第二个:2s,这个代表了过渡的时长。既然是过渡,那就是一个慢慢变化的过程,那这个过程的时间是多长呢,就是这个值所决定的。
第三个:linear,这个代表了过渡的变化曲率。简单的来说,是过渡是匀速进行的。Width从一个值慢慢的变到另外一个值,是匀速变化的。还有其他的取值比如ease、ease-in、ease-out等
上面的代码如果不使用简写的话,那么它的完整写法应该如下:
transition-property过渡属性
transition-duration过渡时长
transition-timing-function 过渡的时间函数
需要注意的是,我们在css样式中设置了transition相关的属性不代表它立马就有过渡效果了,我们只是制定了规则而已:当什么属性的值发生改变之后将会有几秒的过渡效果。红色文字就是我们制定的规则。
因此要真正看到过渡效果,我们还需要有触发条件,比如我们点击一个按钮,在按钮的点击事件监听中改变这个div的宽度值,这时候我们才能看到慢慢变化的过渡效果。
问题2:要实现一个元素的过渡效果,最少需要设置几个css属性
答:在过渡的样式设置中,上面讲了3个属性,如果你比较懒,不想设置这么多个值,那么你最少得设置一个属性,那就是transition-duration 过渡时长。transition-property的默认值为all,all的含义代表所有的属性,所有的属性发生了值得改变,那么都会有过渡效果。不过不是太建议使用all这个值,因为这样有可能会出现我们预期之外的效果。
2、过渡效果失效的几种场景
(1)过渡的属性的取值非连续性
过渡效果对于width、left、height、opacity、padding、margin等属性都可以适用,但是对于一些非连续值得属性无法使用,典型的例子就是display
有些人会通过display的none和block来控制一个元素的显示和隐藏,而他又想在display从none变为block或者从block变为none的时候有过渡效果,于是乎他就会这样写:
他将transition-property写为了display,这样做完之后,当元素显示切换到隐藏的时候是不会有过渡效果的。因为display的取值不是连续值。而之前案例中的width就是连续值,可以从1px、2px、3px。。。1000px进行取值。
(2)过渡的属性没有设置初始值
我们对过渡的定义是这样的:以width为例,当width这个属性值发生改变的时候,将会有一段时间的过渡效果慢慢的改变,慢慢的从原始值变为我们给它设置的值。
有一种场景大家比较容易忘,如下:
在上诉的代码中,我们给div设置了宽度,但是并没有设置高度height,它的高度其实是由子元素撑开的。我们也给它设置了过渡规则,当height的值发生改变的时候,会拥有过渡效果。在js代码中我们响应了一个按钮的点击事件,在点击事件中改变了div的高度,但是你们会发现,高度的变化并没有过渡效果。原因是在于我们并没有在css样式中或者行内样式中设置过div的height属性,相当于它没有初始值,它就不知道从什么值慢慢过渡到200px,这个是很多人都会忽略的并且不好找的错误。
(3)过渡的属性的值改变得太猝不及防
有时候我们使用ajax获取服务器数据,然后使用模板引擎将数据渲染成html片段,放到界面中。
$.ajax({
type:"get",
url:"/getData.php",
dataType:"json",
success:function(data){
var html = template("dataTemplate",data);
$(".container").html(html);
//此时,立马改变html中元素的属性,就算这个属性有过渡规则,可能也会失效
var divElt = document.querySelector("div");
divElt.style.height = "200px";
}
});
如上述代码所示,在局部渲染网页之后,立马改变html中元素的属性,就算这个属性有过渡规则,可能也会失效
对此我们可能会做如下操作:
$.ajax({
type:"get",
url:"/getData.php",
dataType:"json",
success:function(data){
var html = template("dataTemplate",data);
$(".container").html(html);
//此时,立马改变html中元素的属性,就算这个属性有过渡规则,可能也会失效
setTimeout(function(){
var divElt = document.querySelector("div");
divElt.style.height = "200px";
},200);
}
});