最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
8.12.1. CSS3 transition ¶
In CSS3, we don’t need to use Flash animation or JavaScript when we can switch from one style to another in order to add an effect. Mouse over the following elements:
Mouse over the following elements:
CSS3 transition
8.12.2. Browser support ¶
The number in the table represents the first browser version number that supports the property.
The number immediately preceding -webkit- , -ms- , or -moz- is the first browser version number that supports the prefix attribute.
Attribute | |||||
|---|---|---|---|---|---|
Transition | 26.0 4.0-webkit- | 10.0 | 16.0 4.0-moz- | 6.1 3.1-webkit- | 12.1 10.5-o- |
Transition-delay | 26.0 4.0-webkit- | 10.0 | 16.0 4.0-moz- | 6.1 3.1-webkit- | 12.1 10.5-o- |
Transition-duration | 26.0 4.0-webkit- | 10.0 | 16.0 4.0-moz- | 6.1 3.1-webkit- | 12.1 10.5-o- |
Transition-property | 26.0 4.0-webkit- | 10.0 | 16.0 4.0-moz- | 6.1 3.1-webkit- | 12.1 10.5-o- |
Transition-timing-function | 26.0 4.0-webkit- | 10.0 | 16.0 4.0-moz- | 6.1 3.1-webkit- | 12.1 10.5-o- |
8.12.3. How does it work? ¶
A CSS3 transition is the effect of a gradual change of elements from one style to another.
To achieve this, two things must be specified:
Specify the CSS property to which you want to add an effect
Specifies the duration of the effect.
Example ¶
The transition effect applied to the width attribute for a period of 2 seconds:
div { transition: width 2s; -webkit-transition: width 2s; /* Safari */ } Note: if the specified time limit is not specified transition , there will be no effect because the default value is 0.
The effect changes when the value of the specified CSS property changes. A typical change in the CSS attribute is when the user mouse over an element:
Example ¶
Specifies that when the mouse pointer hovers (: hover) in the Note: when the mouse cursor moves over the element, it gradually changes itsoriginal style To add the transformation effect of multiple styles, the added attributes are separated by commas: Added width, height and conversion effect: The following table lists all the transition properties: Attribute Description CSS Transition Shorthand property, which is used to set four transition properties in one property. 3 Transition-property Specifies the name of the CSS attribute to which the transition is applied. 3 Transition-duration Define the time spent on the transition effect. The default is 0. 3 Transition-timing-function Specify the time curve of the transition effect. Default is “ease”. 3 Transition-delay Stipulate when the transition effect begins. The default is 0. 3 The following two examples set all transition properties: Use all transition properties in one example: The transition effect is the same as the above example, but using the abbreviated on the element: div:hover { width:300px; }
8.12.4. Multiple changes ¶
Example ¶
div { transition: width 2s, height 2s, transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; }
8.12.5. Transition attribute ¶
Example ¶
div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; }
Example ¶
transition attributes:div { transition: width 1s linear 2s; /* Safari */ -webkit-transition:width 1s linear 2s; }