> transform-origin specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
> transform-origin specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
> After the transform attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element.
> After the transform attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element.
...
@@ -577,9 +581,21 @@ You can set multiple transform attributes at the same time to apply different tr
...
@@ -577,9 +581,21 @@ You can set multiple transform attributes at the same time to apply different tr
> 1. When multiple transform attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0).
> - When multiple transform attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0).
>
>
> 2. When using the shorthand notion, **NOTE** that the animation effect varies according to the sequence of the style values.
> - When using the shorthand notion, note that the animation effect varies according to the sequence of the style values.
>
>
> 3. The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
> - The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
## Samples
The following samples are provided to help you better understand how to develop animations with the **transform** attribute:
@@ -7,16 +7,16 @@ An application generally consist of more than one page. For example, in a music
...
@@ -7,16 +7,16 @@ An application generally consist of more than one page. For example, in a music
The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages:
The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages:
1. In the “Project“ window of DevEco Studio, choose entry > src > mainjsdefault. Right-click the pages folder and choose NewJS Page from the shortcut menu to create the detail page.
1. In the **Project** window of DevEco Studio, choose **entry** > **src** > **mainjsdefault**. Right-click the **pages** folder and choose **NewJS Page** from the shortcut menu to create the detail page.
2. Call router.push() to navigate users to the detail page.
2. Call **router.push()** to navigate users to the detail page.
3. Call router.back() to navigate users to the index page.
3. Call **router.back()** to navigate users to the index page.
## Building the Page Layout
## Building the Page Layout
The index and detail pages each contains a <text> component that specifies the current page, and a <button> component that implements the switching between two pages. Example code in .hml files is as follows:
The index and detail pages each contains a <text> component that specifies the current page, and a **\<button>** component that implements the switching between two pages. Example code in .hml files is as follows:
```
```
...
@@ -39,7 +39,7 @@ The index and detail pages each contains a <text> component that specifies th
...
@@ -39,7 +39,7 @@ The index and detail pages each contains a <text> component that specifies th
## Setting Page Styles
## Setting Page Styles
Set styles for the index and detail pages. Center the <text> and <button> components and space the two components with 50 pixels. The CSS code for the two pages is as follows:
Set styles for the index and detail pages. Center the **\<text>** and **\<button>** components and space the two components with 50 pixels. The CSS code for the two pages is as follows:
```
```
...
@@ -60,7 +60,7 @@ Set styles for the index and detail pages. Center the <text> and <butto
...
@@ -60,7 +60,7 @@ Set styles for the index and detail pages. Center the <text> and <butto
## Implementing Redirection
## Implementing Redirection
To make the launch method of the <button> component take effect, the redirection logic needs to be implemented in the .js file of the page. Call router.push() to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the router module before calling the router method. The sample code is as follows:
To make the launch method of the **\<button>** component take effect, the redirection logic needs to be implemented in the .js file of the page. Call router.push() to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the router module before calling the router method. The sample code is as follows:
