首页技术文章正文

前端与移动开发:H5C3-过渡效果失效的问题小结

更新时间:2018-01-05 来源:黑马程序员 浏览量:

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);

}

});


本文版权归黑马程序员前端与移动开发学院所有,欢迎转载,转载请注明作者出处。谢谢!

作者:黑马程序员前端与移动开发培训学院

首发:http://web.itheima.com/

分享到:
在线咨询 我要报名
和我们在线交谈!