一种过渡动画的实现方法、装置、终端设备及存储介质与流程

1.本发明实施例涉及页面渲染技术领域，尤其涉及一种过渡动画的实现方法、装置、终端设备及存储介质。


背景技术：

2.目前，在浏览器对网页渲染过程中，若网页中的文档对象模型(document object model，dom)元素中嵌套有子元素，则该dom元素的宽高会随其子元素内容的渲染被逐渐撑开。其中，可以将dom元素宽高逐渐撑开的过程动画，称为元素自然宽高的过渡动画。
3.现有技术中，过渡动画的实现方法大致为：浏览器在每次发生渲染事件后，通过使用dom提供的接口，来遍历整个超级文本标记语言(hyper text markup language，html)文档，以查找变化的子元素，并获取该子元素渲染后的尺寸数据；根据尺寸数据配置过渡动画，并执行配置好的过渡动画。
4.在实现本发明的过程中，发明人发现现有技术中至少存在以下技术问题：在浏览器中操作dom的成本非常高，当元素尺寸频繁变化时，就需要不断遍历整个html文档，以查找变化的子元素，并获取该子元素渲染后的尺寸，导致性能低下；并且，过渡动画需要与渲染事件进行绑定，当元素尺寸被上百个渲染事件(例如对元素的点击事件、鼠标移入元素事件、元素内容变更事件等)影响时，需要将所有渲染事件的方法中均绑定过渡动画，这就导致浏览器代码的前期开发工作量大，后续变更维护也非常困难。


技术实现要素：

5.本发明实施例提供一种过渡动画的实现方法、装置、终端设备及存储介质，能够提高浏览器性能，并且提升了浏览器代码的开发效率、灵活性和可维护性。
6.第一方面，本发明实施例提供了一种过渡动画的实现方法，包括：
7.于监听函数监听到预设元素变化时，触发与所述监听函数对应的回调函数；
8.通过所述回调函数，获取所述预设元素的尺寸数据，并将所述预设元素的尺寸数据，赋值给外层元素的过渡样式中的尺寸属性；其中，所述预设元素嵌套于所述外层元素；
9.基于所述过渡样式中的尺寸属性的最新数据，执行所述外层元素的尺寸的过渡动画。
10.第二方面，本发明实施例提供了一种过渡动画的实现装置，包括：
11.监听模块，用以于监听函数监听到预设元素变化时，触发与所述监听函数对应的回调函数；
12.回调模块，用以通过所述回调函数，获取所述预设元素的尺寸数据，并将所述预设元素的尺寸数据，赋值给外层元素的过渡样式中的尺寸属性；其中，所述预设元素嵌套于所述外层元素；
13.动画执行模块，用以基于所述过渡样式中的尺寸属性的最新数据，执行所述外层元素的尺寸的过渡动画。
14.第三方面，本发明实施例提供了一种终端设备，包括：
15.一个或多个处理器；
16.存储器，用于存储一个或多个程序；
17.当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明任意实施例所述的过渡动画的实现方法。
18.第四方面，本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明任意实施例所述的过渡动画的实现方法。
19.本发明实施例提供的一种过渡动画的实现方法、装置、终端设备及存储介质，于监听函数监听到预设元素变化时，触发与监听函数对应的回调函数；通过回调函数，获取预设元素的尺寸数据，并将预设元素的尺寸数据，赋值给外层元素的过渡样式中的尺寸属性；其中，预设元素嵌套于外层元素；基于过渡样式中的尺寸属性的最新数据，执行外层元素的尺寸的过渡动画。
20.通过直接监听预设元素，并于监听到预设元素改变后触发回调函数，能够实现在预设元素发生变化时，快速对预设元素的尺寸数据进行获取，继而执行过渡动画。与传统方案中，在发生渲染事件后通过dom接口遍历整个html文档查找预设元素，再获取预设元素的尺寸数据相比，浏览器性能有较大的提升。
21.此外，在获取到预设元素的尺寸数据时，可根据预设元素的尺寸数据对外层元素的过渡样式中的尺寸属性进行赋值，从而实现了过渡动画与预设元素的绑定。与传统方案中，过渡动画绑定各渲染事件相比，大大提升了代码的可维护性和开发效率，并且覆盖的渲染场景更加全面。
附图说明
22.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图做一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
23.图1示出了本发明实施例一提供的一种过渡动画的实现方法流程图；
24.图2示出了本发明实施例一提供的一种过渡动画的实现方法中持续监听的示意图；
25.图3示出了本发明实施例二提供的一种过渡动画的实现方法流程图；
26.图4示出了本发明实施例三提供的一种过渡动画的实现方法流程图；
27.图5示出了本发明实施例四提供的一种过渡动画的实现方法流程图；
28.图6示出了本发明实施例四提供的一种过渡动画的实现方法中h5页面的界面示意图；
29.图7示出了本发明实施例五提供的一种过渡动画的实现装置结构示意图；
30.图8示出了本发明实施例六提供的一种终端设备的硬件结构示意图。
具体实施方式
31.为使本发明的目的、技术方案和优点更加清楚，以下将参照本发明实施例中的附
图，通过实施方式清楚、完整地描述本发明的技术方案，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。下述各实施例中，每个实施例中同时提供了可选特征和示例，实施例中记载的各个特征可进行组合，形成多个可选方案，不应将每个编号的实施例仅视为一个技术方案。
32.实施例一
33.图1示出了本发明实施例一提供的一种过渡动画的实现方法流程图。本发明实施例提供的过渡动画的实现方法可适用于，实现网页元素自然宽高的过度动画的情况。该方法可由过渡动画的实现装置来执行，该装置采用软件和/或硬件的方式实现，例如过渡动画的实现装置可以集成于浏览器中，且可以随浏览器安装于手机、电脑等终端设备中。
34.如图1所示，本发明实施例中提供的过渡动画的实现方法，包括如下步骤：
35.s110、于监听函数监听到预设元素变化时，触发与监听函数对应的回调函数。
36.html是一种标记语言，利用html可以对网页进行描述。html的主要表现形式为html标签，且标签通常以开始标签和结束标签的形式成对出现，例如开始标签“<p>”，和结束标签“</p>”。其中，可以将开始标签、结束标签和两标签之间的内容，称为html元素。
37.在将html文档(可以理解为网页)加载到浏览器的时候，浏览器会解析载入html文档中的html元素，用以构建dom模型，也就是说浏览器会解析html元素为dom元素。由于html文档中html元素为树状结构，解析到的dom元素同样呈树状结构。浏览器可用于更新dom树，以及将更新的dom树渲染到浏览器界面中。
38.本实施例中，预设元素和外层元素，可以理解为浏览器创建的两个dom元素，且预设元素嵌套于外层元素中。可以认为，在dom树中，外层元素为预设元素的父节点。
39.其中，预设元素变化，可以包括但不限于是预设元素的元素尺寸变化。并且，预设元素的元素尺寸，可以被上多个渲染事件(例如对元素的点击事件、鼠标移入元素事件、元素内容变更事件等)影响。
40.其中，浏览器可以利用javascript提供的应用程序接口(application programming interface，api)，来实现对预设元素变化的监听。并且，javascript中可以实现对预设元素变化进行监听的接口，包括但不限于resizeobserver api和mutationobserver api等。示例性的，在使用上述接口时，需要实例化一个监听器对象，通过监听器对象的监听函数(例如observe方法)可以实现对预设元素的监听。
41.其中，回调函数可以认为是，通过构造函数实例化监听器对象时，在构造函数中传入的函数，从而回调函数与监听函数具备了对应关系。当通过监听器对象的监听函数，监听到预设元素变化时，可触发该回调函数，以通过回调函数实现获取预设元素的尺寸数据，以及对外层元素的过渡样式中尺寸属性进行赋值。
42.s120、通过回调函数，获取预设元素的尺寸数据，并将预设元素的尺寸数据，赋值给外层元素的过渡样式中的尺寸属性。
43.其中，回调函数在被触发后，可回调被监听的全部元素的相关信息。可通过属性标识，从相关信息中获取到需求的尺寸数据。进而，可根据获取到的尺寸数据，为嵌套该预设元素的外层元素的过渡样式进行赋值，以实现在预设元素尺寸变化时，外层元素的尺寸跟随其进行过渡变化。
44.由于获取预设元素的宽高属性数据是通过监听后的回调方法获取的，浏览器不再需要在发生渲染事件后通过dom来读取元素的宽高属性，其性能有较大的提升。此外，在获取到预设元素的尺寸数据后，可根据预设元素的尺寸数据对外层元素的过渡样式中的尺寸属性进行赋值，从而实现了过渡动画与预设元素的绑定。并且，过渡动画只需要绑定一次预设元素，就能够实现在预设元素受各渲染事件影响发生变化时，获取预设元素的尺寸数据。与传统方案中，过渡动画绑定各渲染事件相比，大大提升了代码的可维护性和开发效率，并且覆盖的渲染场景更加全面。
45.s130、基于过渡样式中的尺寸属性的最新数据，执行外层元素的尺寸的过渡动画。
46.层叠样式表(cascading style sheets，css)是一种用来表现html文档样式的计算机语言，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
47.本实施例，过渡样式可以认为是css中的transition属性样式，且transition属性样式中可至少包括尺寸属性，例如宽属性transiton
‑
property:width和高属性transiton
‑
property:height等。当过渡样式中的尺寸属性发生变化时，可触发执行动画逻辑，以实现将外层元素尺寸过渡到变化后的尺寸属性的最新数据。
48.示例性的，图2示出了本发明实施例一提供的一种过渡动画的实现方法中持续监听的示意图。
49.参见图2，当内层的预设元素受任意渲染事件影响，发生尺寸变化时，监听函数可监听到该变化；随即，可触发与监听函数对应的回调函数，以快速获取预设元素的尺寸数据，以及对外层元素的过渡样式中尺寸属性进行赋值；当过渡样式中的尺寸属性发生变化时，可触发执行动画逻辑，以实现将外层元素尺寸过渡到变化后的尺寸属性的最新数据，从而能够高效实现外层元素的尺寸的过渡动画。此外，监听器对象可持续监听任意渲染事件导致的预设元素尺寸变化，从而能够使覆盖的渲染场景更加全面。
50.本发明实施例提供的一种过渡动画的实现方法，通过直接监听预设元素，并于监听到预设元素改变后触发回调函数，能够实现在预设元素发生变化时，快速对预设元素的尺寸数据进行获取，继而执行过渡动画。与传统方案中，在发生渲染事件后通过dom接口遍历整个html文档查找预设元素，再获取预设元素的尺寸数据相比，浏览器性能有较大的提升。此外，在获取到预设元素的尺寸数据时，可根据预设元素的尺寸数据对外层元素的过渡样式中的尺寸属性进行赋值，从而实现了过渡动画与预设元素的绑定。与传统方案中，过渡动画绑定各渲染事件相比，大大提升了代码的可维护性和开发效率，并且覆盖的渲染场景更加全面。
51.实施例二
52.图3示出了本发明实施例二提供的一种过渡动画的实现方法流程图。本实施例在上述实施例基础上，对回调函数具体执行的步骤进行优化，能够实现获取预设元素的尺寸数据，以及对外层元素的过渡样式中尺寸属性进行赋值。
53.参见图3，本发明实施例中提供的过渡动画的实现方法，包括如下步骤：
54.s310、于监听函数监听到预设元素变化时，触发与监听函数对应的回调函数。
55.s320、通过回调函数，返回与被监听函数监听的元素对应的元素信息数组。
56.其中，通过监听器对象的监听函数(例如observe方法)，来实现对预设元素的监听
的同时，还可实现对至少一个其他元素的监听。当监听器对象，监听到被监听的任意元素发生改变时，皆可触发回调函数。
57.其中，当监听函数监听到预设元素变化时，回调函数可返回与被监听函数监听的元素对应的元素信息数组，元素信息数组例如可以用entries表示。并且，返回的元素信息数组，可以至少包括内容矩阵区域(contentrect)属性和目标(target)属性。其中，contentrect属性中可以包含元素的尺寸位置信息，例如元素本身宽度width、元素本身高度height、元素内边距顶/底部位置top/bottom和元素内边距左/右侧位置left/right等。其中，target属性可认为是元素本身，通过元素信息数组的target属性可以获取到被监听的各元素。
58.s330、调用数组查找方法，从元素信息数组中查找与预设元素的类名对应的元素，并将查找到的预设元素，赋值给预先声明的第一变量。
59.由于元素信息数组为数组类型，可以调用数组查找方法进行相关信息查找。例如，可以调用元素信息数组entrieds的查找方法(find方法)，根据target属性里的预设元素的类名(class名)查找到预设元素。其中，可声明一个第一变量，第一变量例如可以用el表示。并且，可将find方法的返回结果赋值给第一变量el，从而可以通过操作第一变量el来获取预设元素的相关信息。
60.其中，第一变量的名称除el外还可以用其他字符表示，并作为对第一变量的限制。并且，本发明任意实施例中公开的类名、变量名均为示例性举例，可认为其不作为对类和变量的限制。
61.s340、调用第一变量的内容矩形区域属性，以获取预设元素的尺寸数据。
62.其中，将查找到的预设元素赋值给第一变量el后，进一步通过获取第一变量el的contentrect属性，即可得到预设元素的尺寸数据。例如，通过el.contentrect.width能够获取到预设元素的宽度，通过el.contentrect.height能够获取到预设元素的高度。
63.s350、调用文档查询选择器方法，根据外层元素的类名获取外层元素，并将获取的外层元素，赋值给预先声明的第二变量。
64.其中，通过文档查询选择器方法(doucment.queryselector方法)，能够根据外层元素的class名，获取到预先创建的外层元素。其中，可声明一个第二变量，第二变量例如可以用main表示。并且，可将获取到的外层元素赋值给第二变量main，从而可以通过操作第二变量来获取外层元素的相关信息。
65.s360、将预设元素的尺寸数据与像素单位进行字符拼接，并将拼接结果赋值给第二变量的过渡样式中的尺寸属性。
66.其中，将预设元素的尺寸数据与像素单位进行字符拼接，例如可以是通过el.contentrect.width
‘
px’将预设元素的宽度与像素单位px进行字符拼接；通过el.contentrect.height
‘
px’将预设元素的高度与像素单位px进行字符拼接。
67.其中，第二变量的过渡样式的尺寸属性，例如可以包括过渡样式的宽属性main.style.width和过渡样式的高属性main.style.height。
68.其中，可以将el.contentrect.width
‘
px’赋值给main.style.width，将el.contentrect.height
‘
px’赋值给main.style.height。
69.s370、基于过渡样式中的尺寸属性的最新数据，执行外层元素的尺寸的过渡动画。
70.其中，当过渡样式中的尺寸属性发生变化时，可触发执行动画逻辑，以实现将外层元素尺寸过渡到变化后的尺寸属性的最新数据。
71.本发明实施例在上述实施例基础上，对回调函数具体执行的步骤进行优化，能够实现获取预设元素的尺寸数据，以及对外层元素的过渡样式中尺寸属性进行赋值。此外，本发明实施例与上述实施例提出的过渡动画的实现方法属于同一发明构思，未在本实施例中详尽描述的技术细节可参见上述实施例，且本实施例与上述实施例具有相同的有益效果。
72.实施例三
73.图4示出了本发明实施例三提供的一种过渡动画的实现方法流程图。本实施例在上述实施例基础上，增加了预先进行元素布局、元素样式设置和绑定监听预设元素步骤进行优化，基于预先处理步骤能够为过渡动画的实现奠定基础。进一步的，可利用元素变化监听的构造函数，绑定预设元素与监听函数，以及构造监听函数与回调函数的对应关系，从而实现过渡动画与预设元素的绑定。进一步的，可通过设置更加丰富的样式，提高过渡动画的呈现效果。
74.如图4所示，本发明实施例中提供的过渡动画的实现方法，包括如下步骤：
75.s410、创建外层元素，以及嵌套于外层元素的预设元素。
76.其中，在监听预设元素之前，浏览器可预先创建外层元素和预设元素。例如，可以创建一块级div元素作为外层元素，且外层元素的class名例如可以为main，即可以等同于第二变量名。在外层元素内部，可创建一div元素作为预设元素，且预设元素的class名例如可以为item，从而实现了对预设元素嵌套于外层元素的布局。
77.其中，预设元素和外层元素还可以根据实际业务场景，创建其他类型的元素，而不限于是div元素。例如，当预设元素为列表时，可以将预设元素创建为ul元素。
78.s420、为外层元素添加过渡样式。
79.其中，过渡样式包括尺寸属性。通过在外层元素main的内联样式中设置过渡样式transition，可以为外层元素添加过渡样式。且transition属性样式可至少包括尺寸属性，例如宽属性transiton
‑
property:width和高属性transiton
‑
property:height等。
80.在一些可选的实现方式中，若外层元素和预设元素为块级元素，则在为外层元素添加过渡样式的同时，还包括：为外层元素和预设元素，添加基于内容的尺寸自适应样式；和/或，为外层元素添加溢出隐藏样式；和/或，为外层元素添加显示效果样式。
81.其中，由于块级元素div默认是独占一行的(即无限宽度)块级元素，当外层元素main和预设元素item为div元素时，可在外层元素main和预设元素item的内联样式中，各添加一条基于内容的尺寸自适应样式，即display:inline
‑
block样式。其中，display:inline
‑
block样式可以使元素的宽高基于其内容(或子元素内容)的宽高自动适应变化。
82.和/或，还可以给外层元素main的元素的内联样式中，添加一条溢出隐藏样式，即overflow:hidden样式。其中，overflow:hidden样式可以用来控制其内容的宽高超出其宽高时进行截断(隐藏)处理。
83.和/或，还可以给外层元素main的元素的内联样式中，添加显示效果样式，显示效果样式可包括但不现于边框样式border等，从而时外层元素在渲染后，可以具备比较明显的视觉效果，提高视觉交互体验。
84.s430、将预设元素与监听函数进行绑定，以及构造监听函数与回调函数的对应关
系。
85.在通过javascript提供的api，例如resizeobserver api和mutationobserver api等，对预设元素的变化进行监听时，需要实例化一个监听器对象，通过监听器对象的监听函数(例如observe方法)可以实现对预设元素的监听，即实现了将预设元素和监听函数的绑定。并且，在通过构造函数实例化监听器对象时，可以通过在构造函数中传入回调函数，以构造回调函数与监听函数具备了对应关系。
86.在一些可选的实现方式中，将预设元素与监听函数进行绑定，以及构造监听函数与回调函数的对应关系，包括：通过文档查询选择器方法，根据预设元素的类名获取元素，并将获取的预设元素赋值给预先声明的第三变量；实例化元素变化监听的构造函数，并将定义的回调函数作为构造函数的参数；将实例化后的构造函数的返回值，赋值给预先声明的第四变量；调用第四变量的监听函数，将第三变量作为监听函数的参数。
87.其中，通过文档查询选择器方法(doucment.queryselector方法)，能够根据预设元素的class名item，获取到预先创建的预设元素。其中，可声明一个第三变量，且第三变量例如也可以用item表示。并且，可将获取到的预设元素赋值给第三变量item，从而可以通过操作第三变量来获取预设元素的相关信息。
88.其中，实例化一个监听器对象时需要用到构造函数，且构造函数例如可以是resizeobserver函数或mutationobserver函数。可以通过使用new关键字调用构造函数，且可以将预先定义的回调函数作为构造函数的参数。调用构造函数的返回值，可认为是一监听器对象。其中，可以将返回的监听器对象赋值给预先声明的第四变量，第四变量例如可以用ro表示。进而，可以调用第四变量ro的监听函数，实现对预设元素的监听。
89.示例性的，可以通过ro＝new resizeobserver(entries＝>{})语句，实现将实例化后的构造函数的返回值，赋值给预先声明的第四变量。其中，ro可表示第四变量；通过new可实现对构造函数resizeobserver()的调用；entries为函数的形参，可表征元素信息数组；{}内部可包括回调函数的具体逻辑。进而，可以通过ro.observe(item)语句，实现监听函数observe和预设元素item的绑定。通过上述操作，能够实现通过监听函数对预设元素进行监听，并于监听函数监听到预设元素变化时，触发与监听函数对应的回调函数。
90.s440、于监听函数监听到预设元素变化时，触发与监听函数对应的回调函数。
91.s450、通过回调函数，获取预设元素的尺寸数据，并将预设元素的尺寸数据，赋值给外层元素的过渡样式中的尺寸属性。
92.s460、基于过渡样式中的尺寸属性的最新数据，执行外层元素的尺寸的过渡动画。
93.本发明实施例提供的一种过渡动画的实现方法，增加了预先进行元素布局、元素样式设置和绑定监听预设元素步骤进行优化，基于预先处理步骤能够为过渡动画的实现奠定基础。进一步的，可利用元素变化监听的构造函数，绑定预设元素与监听函数，以及构造监听函数与回调函数的对应关系，从而实现过渡动画与预设元素的绑定。进一步的，可通过设置更加丰富的样式，提高过渡动画的呈现效果。
94.此外，本发明实施例与上述实施例提出的过渡动画的实现方法属于同一发明构思，未在本实施例中详尽描述的技术细节可参见上述实施例，且本实施例与上述实施例具有相同的有益效果。
95.实施例四
96.图5示出了本发明实施例四提供的一种过渡动画的实现方法流程图。本实施例在上述实施例基础上，对过渡动画的实现方法的应用场景进行了举例，例如可应用于h5页面应用渲染过程中，能够基于过渡样式中的尺寸属性的最新数据，以及过渡样式中的持续时间属性的数据，执行外层元素的尺寸的过渡动画。通过基于h5页面自带的过渡动画方法，提高了过渡动画的实现效率。
97.进一步的，还对h5页面的具体应用进行了举例，能够在答题页面的题型渲染时，执行外层元素的过渡动画，实现基于不同的题目内容实现外层元素的尺寸自然过渡。
98.参见图5，本发明实施例中提供的过渡动画的实现方法，可应用于h5页面渲染，且当h5页面为答题页面时，可包括如下步骤：
99.s510、接收服务器发送的答题页面代码，根据答题页面代码中的题型字段，获取与题型字段对应的渲染方法。
100.本实施例中，答题页面可以应用于多种场景，例如用户健康测评、产品使用反馈和心里测试等等场景中。
101.其中，h5可以认为是html5.0，是指一种构建web内容的语言描述方式。浏览器可以向服务器请求h5类型的答题页面代码，并可以将答题页面代码写入预先创建的预设元素中，以实现将题目渲染至浏览器界面。
102.其中，答题页面中可以包括不同题型，例如选择题、填空题等。并且，浏览器内部，可针对不同题型预先封装好不同的渲染方法。当浏览器接收到答题页面代码时，可以根据该题型字段确定渲染题目所需的渲染方法，以实现对题目的渲染。
103.s520、基于渲染方法对答题页面进行渲染，并将渲染结果赋值给预设元素的内部字符串属性，以触发监听函数监听到预设元素变化。
104.其中，通过获取到的预设元素赋值给第三变量item，能够实现通过操作第三变量来获取预设元素的相关信息。其中，渲染输出的结果可以为一html字符串，可以通过将该字符串赋值给第三变量的内部字符串属性(innerhtml属性)中，以实现浏览器对答题页面进行重排，将题目写进浏览器，即会触发监听函数监听到预设元素变化。
105.s530、于监听函数监听到预设元素变化时，触发与监听函数对应的回调函数。
106.s540、通过回调函数，获取预设元素的尺寸数据，并将预设元素的尺寸数据，赋值给外层元素的过渡样式中的尺寸属性。
107.其中，预设元素嵌套于外层元素。
108.s550、基于过渡样式中的尺寸属性的最新数据，以及过渡样式中的持续时间属性的数据，执行外层元素的尺寸的过渡动画。
109.其中，浏览器为外层元素添加过渡样式transition时，还可以添加transitioin
‑
duration属性样式，该样式定义了过渡动画的持续时间。例如，transitioin
‑
duration:1000，可以表征使用1000毫秒的时间执行完过渡动画。
110.其中，通过使用浏览器内部定义的过渡样式来实现过渡动画的执行，可提高过渡动画的执行效率。此外，当浏览器不支持上述过渡样式时，还可以通过js代码中自定义定时器的语句，实现执行过渡动画。
111.示例性的，图6示出了本发明实施例四提供的一种过渡动画的实现方法中h5页面的界面示意图。
112.参见图6，h5页面可以为移动端h5单页应用，该应用可以为健康测评应用，且可通过用户答题的方式实现，实现对用户健康测评。
113.其中，该测评页面中，可以对多种题型进行渲染，例如对单选题、填空题、日期题或滑块题等进行渲染。由于每种题型因内容不同，在页面上呈现的宽高也各不相同，例如比如单选题可能会包含至少一个选项，填空题可包括一行输入控件。因此，浏览器需要基于题型自身内容渲染题目外框的自然宽高。
114.其中，当用户打开答题页面后，程序可向服务器发送请求，以获取当前测评的题目；当接收到服务器发送的答题页面代码时，可答题页面代码中的题型字段，获取与题型字段对应的渲染方法；基于渲染方法对答题页面进行渲染，并将渲染结果赋值给预设元素的内部字符串属性，以触发监听函数监听到预设元素变化；触发回调函数，以获取预设元素的尺寸数据，以及对外层元素的过渡样式中尺寸属性进行赋值；执行基于题型渲染后的自然宽高的过渡动画。
115.图6中，(a)图和(b)图分别为先后连续渲染的两道题目的界面，且加粗的实线框可表征外层元素的尺寸，虚线框可表征预设元素的尺寸。(a)图中题目内容较短，因此渲染得到的外层元素尺寸较小。在用户对(a)图中的题目进行作答后，浏览器可请求(b)图中的题目。由于(b)图中的题目内容较长，此时需要将外层元素的长度进行拉长，通过本发明提供的过渡动画的实现方法，可以对双箭头表征的外层元素需要拉长的尺寸部分h，进行过渡动画的实现。
116.此外，参见图6，答题页面中还可以渲染有答题进度等控件，以提升答题体验。其他界面控件，例如答题时间控件，亦可渲染至答题页面，在此不做穷举。
117.本发明实施例在上述实施例基础上，对过渡动画的实现方法的应用场景进行了举例，能够在h5页面应用渲染过程中，基于h5页面自带的过渡动画方法，执行外层元素的过渡动画，提高了过渡动画的实现效率。进一步的，还对h5页面的具体应用进行了举例，能够在答题页面的题型渲染时，执行外层元素的过渡动画，实现基于不同的题目内容实现外层元素的尺寸自然过渡。此外，本发明实施例与上述实施例提出的过渡动画的实现方法属于同一发明构思，未在本实施例中详尽描述的技术细节可参见上述实施例，且本实施例与上述实施例具有相同的有益效果。
118.实施例五
119.图7示出了本发明实施例五提供的一种过渡动画的实现装置结构示意图。本发明实施例可适用于，实现网页元素自然宽高的过度动画的情况。通过本发明提供的过渡动画的实现装置，可实现上述实施例提供的过渡动画的实现方法。
120.如图7所示，本发明实施例中过渡动画的实现装置，包括：
121.监听模块710，用以于监听函数监听到预设元素变化时，触发与监听函数对应的回调函数；
122.回调模块720，用以通过回调函数，获取预设元素的尺寸数据，并将预设元素的尺寸数据，赋值给外层元素的过渡样式中的尺寸属性；其中，预设元素嵌套于外层元素；
123.动画执行模块730，用以基于过渡样式中的尺寸属性的最新数据，执行外层元素的尺寸的过渡动画。
124.在一些可选的实现方式中，回调模块，包括：
125.数组返回单元，用以返回与被监听函数监听的元素对应的元素信息数组；
126.预设元素查找单元，用以调用数组查找方法，从元素信息数组中查找与预设元素的类名对应的元素，并将查找到的预设元素，赋值给预先声明的第一变量；
127.属性获取单元，用以调用第一变量的内容矩形区域属性，以获取预设元素的尺寸数据；
128.外层元素获取单元，用以调用文档查询选择器方法，根据外层元素的类名获取外层元素，并将获取的外层元素，赋值给预先声明的第二变量；
129.赋值单元，用以将预设元素的尺寸数据与像素单位进行字符拼接，并将拼接结果赋值给第二变量的过渡样式中的尺寸属性。
130.在一些可选的实现方式中，过渡动画的实现装置，还包括：
131.布局模块，用以在通过监听函数监听元素变化之前，创建外层元素，以及嵌套于外层元素的预设元素；
132.样式添加模块，用于为外层元素添加过渡样式；其中过渡样式包括尺寸属性；
133.绑定监听模块，用以将预设元素与监听函数进行绑定，以及构造监听函数与回调函数的对应关系。
134.在一些可选的实现方式中，绑定监听模块，具体用以：通过文档查询选择器方法，根据预设元素的类名获取元素，并将获取的预设元素赋值给预先声明的第三变量；实例化元素变化监听的构造函数，并将定义的回调函数作为构造函数的参数；实例化后的构造函数的返回值，赋值给预先声明的第四变量；调用第四变量的监听函数，将第三变量作为监听函数的参数。
135.在一些可选的实现方式中，若外层元素和预设元素为块级元素，则样式添加模块，在为外层元素添加过渡样式的同时，还用于为外层元素和预设元素，添加基于内容的尺寸自适应样式；和/或，为外层元素添加溢出隐藏样式；和/或，为外层元素添加显示效果样式。
136.在一些可选的实现方式中，过渡动画的实现装置应用于h5页面渲染；相应的，动画执行模块，具体用于基于过渡样式中的尺寸属性的最新数据，以及过渡样式中的持续时间属性的数据，执行外层元素的尺寸的过渡动画。
137.在一些可选的实现方式中，若h5页面为答题页面，则过渡动画的实现装置，还包括：
138.代码接收模块，用以在通过监听函数监听预设元素变化之前，接收服务器发送的答题页面代码，根据答题页面代码中的题型字段，获取与题型字段对应的渲染方法；
139.渲染模块，用以基于渲染方法对答题页面进行渲染，并将渲染结果赋值给预设元素的内部字符串属性，以触发监听函数监听到预设元素变化。
140.本发明实施例提供的过渡动画的实现装置，与上述实施例提供的过渡动画的实现方法属于同一发明构思，未在本发明实施例中详尽描述的技术细节可参见上述实施例，并且本发明实施例与上述实施例具有相同的有益效果。
141.实施例六
142.图8示出了本发明实施例六提供的一种终端设备的硬件结构示意图。本发明实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、pda(个人数字助理)、pad(平板电脑)、pmp(便携式多媒体播放器)、车载终端(例如车载导航终端)等
等的移动终端以及诸如数字tv、台式计算机等等的固定终端。图8示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
143.如图8所示，终端设备800可以包括处理装置(例如中央处理器、图形处理器等)801，其可以根据存储在只读存储器(read
‑
only memory，rom)802中的程序或者从存储装置808加载到随机访问存储器(random access memory，ram)803中的程序而执行各种适当的动作和处理。在ram803中，还存储有终端设备800操作所需的各种程序和数据。处理装置801、rom 802以及ram 803通过总线804彼此相连。输入/输出(i/o)接口805也连接至总线804。
144.通常，以下装置可以连接至i/o接口805：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置806；包括例如液晶显示器(lcd)、扬声器、振动器等的输出装置807；包括例如磁带、硬盘等的存储装置808；以及通信装置809。通信装置809可以允许终端设备800与其他设备进行无线或有线通信以交换数据。虽然图8示出了具有各种装置的终端设备800，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
145.特别地，根据本发明的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置809从网络上被下载和安装，或者从存储装置808被安装，或者从rom 802被安装。在该计算机程序被处理装置801执行时，执行本发明实施例提供的过渡动画的实现方法中限定的上述功能。
146.本发明实施例提供的终端与上述实施例提供的过渡动画的实现方法属于同一发明构思，未在本发明实施例中详尽描述的技术细节可参见上述实施例，并且本发明实施例与上述实施例具有相同的有益效果。
147.实施例七
148.本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述实施例所提供的过渡动画的实现方法。
149.需要说明的是，本发明实施例上述的计算机可读存储介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(random access memory，ram)、只读存储器(read
‑
only memory，rom)、可擦式可编程只读存储器(erasable programmable read
‑
only memory，eprom)或闪存(flash)、光纤、便携式紧凑磁盘只读存储器(cd
‑
rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明实施例中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介
质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、rf(射频)等等，或者上述的任意合适的组合。
150.在一些实施方式中，客户端、服务器可以利用诸如http(hypertext transfer protocol，超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信(例如，通信网络)互连。通信网络的示例包括局域网(“lan”)，广域网(“wan”)，网际网(例如，互联网)以及端对端网络(例如，ad hoc端对端网络)，以及任何当前已知或未来研发的网络。
151.上述计算机可读存储介质可以是上述终端设备中所包含的，也可以是单独存在，而未装配入该终端设备中的。
152.上述终端设备存储承载有一个或者多个程序，当上述一个或者多个程序被该终端设备执行时，使得该终端设备：
153.于监听函数监听到预设元素变化时，触发与监听函数对应的回调函数；通过回调函数，获取预设元素的尺寸数据，并将预设元素的尺寸数据，赋值给外层元素的过渡样式中的尺寸属性；其中，预设元素嵌套于外层元素；基于过渡样式中的尺寸属性的最新数据，执行外层元素的尺寸的过渡动画。
154.可以以一种或多种程序设计语言或其组合来编写用于执行本发明的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如java、smalltalk、c ，还包括常规的过程式程序设计语言—诸如“c”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(lan)或广域网(wan)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
155.附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能页可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
156.描述于本发明实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定。
157.本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范样式的硬件逻辑部件包括：现场可编程门阵列(fpga)、专用集成电路(asic)、专用标准产品(assp)、片上系统(soc)、复杂可编程逻辑设备(cpld)等等。
158.注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。