-
菊花一朵
现在，网络技术的不断发展，视图和数据呈现更提出的前端，而背景则是更多的数据处理。因此，我们经常看到这样的互动场景。加载页面，看到里面的菊花一盒是旋转的，然后内容呈现；或单击一个按钮，菊花是旋转的，然后列表是动态加载，例如：
没有问题吗事实上，功能好，菊花，和用户愿意等待，但你认为所有的相互作用出现菊花具有内容是砰砰砰；它是非常激烈的，特别是当内容是动态的，高度不确定的。我们用一些好的手机APP（如微信）也不会有这样的感觉，相互作用的过程非常顺利，像山泉水，流到山下，但不感觉在大峡谷行走。
因此，如果呈现菊花的内容可以通过自然动画过渡呈现，势必会增强用户体验。
和动态变化是研究的主要内容的关键因素；mdash；高度，和最好的工具是CSS3过渡过渡，所以大脑不禁怀疑是不是高的动画可以使用CSS3的过渡来实现内容的动态演示，逐步提升用户体验。
事实上，早在12年，我开始了这方面的尝试，如果有兴趣，可以查看这篇文章：更|互动中逐步使用过渡动画；我也看着我自己，发现我当年离开我的长安街，你可以看到它直接从五其中，今年招标的年轻科技有限公司，在获取集装箱，高度的方法有些傻，大家都假装没看见。
二、CSS3过渡的困难
如果CSS代码直接线允许动态动画是动画，这不需要这篇文章，和所有的网站被这种质量经验很久以前的互动。这是CSS3过渡的限制，和自动*冷！这是什么意思
大家都很明白，所谓的转型，是从一个地方到另一个地方，例如，从0个到100个。但你从0岁来到了汽车，目瞪口呆。当我在大学时，我看到一部美国科幻电影心灵运输车。
然而，当我们提出的动态的内容在一个div，因为我们不知道里面的内容（这是动态的，所以我们做的）高度为汽车，那么，即使转型：height.35s，也不会有动画，我们需要定值。
那么难点和重点何在，如何给出固定高度值呢
三。固定高度值和转换触发器
很简单，当前的高固定值，高动态值后的固定值被加载，然后样式设置，超过
我不谈论代码细节。我并不真正关心它，我需要代码，代码！Rdquo：据估计，许多人心中充满了咆哮。
将代码复制如下：高度无缝的动画方法
无功funtransitionheight =功能（元素、时间）{ / /时间，默认值
如果（typeof window.getcomputedstyle = =未定义）返回；
VaR高度= window.getcomputedstyle（元）。高度；
element.style.height =汽车；
无功targetheight = window.getcomputedstyle（元）。高度；
element.style.height =高度；
element.offsetwidth = element.offsetwidth；
如果（时间）element.style.transition =高度+时间+ ；
element.style.height = targetheight；
}；
十行头点编码。
元素是一个容器元素；如果转换是用CSS编写的，则时间参数不能为例：
复制代码代码如下：元{过渡：高度250ms；溢出：隐藏；}
FunTransitionHeight（元）
funtransitionheight的名字，如果你不喜欢它，你可以改变它自己。IE9 +有效，IE10 +有动画，IE6 ~ IE8是旧的，所以称为渐进性强化。
眼见为实，你真的可以点击这里：没有高度的动态元素高度演示CSS3过渡
点击页面点击我的按钮，里面有很高的固定内容演示，大家可以看到演示时不响，而是恰恰查。
你怎么称呼它这很简单。当初始化funtransitionheight（），它提供了一个固定的值。然后每次菊花完成，内容是加载，然后动画来funtransitionheight（）。也就是说，相比以前的js代码，它只是一行funtransitionheight（元）称，它是实用的、低成本的！