前端与移动开发：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";