1# Immediate Delivery of Explicit Animation (animateToImmediately)
2
3The **animateToImmediately** API implements immediate delivery for [explicit animations](ts-explicit-animation.md). When multiple property animations are loaded at once, you can call this API to immediately execute the transition animation for state changes caused by the specified closure function.
4
5> **NOTE**
6>
7> This feature is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
8>
9
10## APIs
11
12## animateToImmediately
13
14animateToImmediately(value: AnimateParam , event: () => void): void
15
16Delivers an explicit animation immediately.
17
18**Atomic service API**: This API can be used in atomic services since API version 12.
19
20**System capability**: SystemCapability.ArkUI.ArkUI.Full
21
22**Parameters**
23
24| Name| Type                                                        | Mandatory| Description                                                        |
25| ------ | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
26| value  | [AnimateParam](ts-explicit-animation.md#animateparam) | Yes      | Animation settings.                                      |
27| event  | () => void                                                   | Yes      | Closure function that displays the animation. The system automatically inserts a transition animation for state changes caused by the closure function.|
28
29## Example
30
31```ts
32// xxx.ets
33@Entry
34@Component
35struct AnimateToImmediatelyExample {
36  @State widthSize: number = 250
37  @State heightSize: number = 100
38  @State opacitySize: number = 0
39  private flag: boolean = true
40
41  build() {
42    Column() {
43      Column()
44      .width(this.widthSize)
45      .height(this.heightSize)
46      .backgroundColor(Color.Green)
47      .opacity(this.opacitySize)
48      Button('change size')
49        .margin(30)
50        .onClick(() => {
51          if (this.flag) {
52            animateToImmediately({
53              delay: 0,
54              duration: 1000
55            }, () => {
56              this.opacitySize = 1
57            })
58            animateTo({
59              delay: 1000,
60              duration: 1000
61            }, () => {
62              this.widthSize = 150
63              this.heightSize = 60
64            })
65          } else {
66            animateToImmediately({
67              delay: 0,
68              duration: 1000
69            }, () => {
70              this.widthSize = 250
71              this.heightSize = 100
72            })
73            animateTo({
74              delay: 1000,
75              duration: 1000
76            }, () => {
77              this.opacitySize = 0
78            })
79          }
80          this.flag = !this.flag
81        })
82    }.width('100%').margin({ top: 5 })
83  }
84}
85```
86
87![animation1](figures/animateToImmediately1.gif)
88