ng-zorro-antd-core-animation.mjs 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. import { trigger, state, transition, style, animate, query, stagger } from '@angular/animations';
  2. /**
  3. * Use of this source code is governed by an MIT-style license that can be
  4. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  5. */
  6. class AnimationDuration {
  7. static SLOW = '0.3s'; // Modal
  8. static BASE = '0.2s';
  9. static FAST = '0.1s'; // Tooltip
  10. }
  11. class AnimationCurves {
  12. static EASE_BASE_OUT = 'cubic-bezier(0.7, 0.3, 0.1, 1)';
  13. static EASE_BASE_IN = 'cubic-bezier(0.9, 0, 0.3, 0.7)';
  14. static EASE_OUT = 'cubic-bezier(0.215, 0.61, 0.355, 1)';
  15. static EASE_IN = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
  16. static EASE_IN_OUT = 'cubic-bezier(0.645, 0.045, 0.355, 1)';
  17. static EASE_OUT_BACK = 'cubic-bezier(0.12, 0.4, 0.29, 1.46)';
  18. static EASE_IN_BACK = 'cubic-bezier(0.71, -0.46, 0.88, 0.6)';
  19. static EASE_IN_OUT_BACK = 'cubic-bezier(0.71, -0.46, 0.29, 1.46)';
  20. static EASE_OUT_CIRC = 'cubic-bezier(0.08, 0.82, 0.17, 1)';
  21. static EASE_IN_CIRC = 'cubic-bezier(0.6, 0.04, 0.98, 0.34)';
  22. static EASE_IN_OUT_CIRC = 'cubic-bezier(0.78, 0.14, 0.15, 0.86)';
  23. static EASE_OUT_QUINT = 'cubic-bezier(0.23, 1, 0.32, 1)';
  24. static EASE_IN_QUINT = 'cubic-bezier(0.755, 0.05, 0.855, 0.06)';
  25. static EASE_IN_OUT_QUINT = 'cubic-bezier(0.86, 0, 0.07, 1)';
  26. }
  27. /**
  28. * Use of this source code is governed by an MIT-style license that can be
  29. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  30. */
  31. const collapseMotion = trigger('collapseMotion', [
  32. state('expanded', style({ height: '*' })),
  33. state('collapsed', style({ height: 0, overflow: 'hidden' })),
  34. state('hidden', style({ height: 0, overflow: 'hidden', borderTopWidth: '0' })),
  35. transition('expanded => collapsed', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
  36. transition('expanded => hidden', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
  37. transition('collapsed => expanded', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`)),
  38. transition('hidden => expanded', animate(`150ms ${AnimationCurves.EASE_IN_OUT}`))
  39. ]);
  40. const treeCollapseMotion = trigger('treeCollapseMotion', [
  41. transition('* => *', [
  42. query('nz-tree-node:leave,nz-tree-builtin-node:leave', [
  43. style({ overflow: 'hidden' }),
  44. stagger(0, [
  45. animate(`150ms ${AnimationCurves.EASE_IN_OUT}`, style({ height: 0, opacity: 0, 'padding-bottom': 0 }))
  46. ])
  47. ], {
  48. optional: true
  49. }),
  50. query('nz-tree-node:enter,nz-tree-builtin-node:enter', [
  51. style({ overflow: 'hidden', height: 0, opacity: 0, 'padding-bottom': 0 }),
  52. stagger(0, [
  53. animate(`150ms ${AnimationCurves.EASE_IN_OUT}`, style({ overflow: 'hidden', height: '*', opacity: '*', 'padding-bottom': '*' }))
  54. ])
  55. ], {
  56. optional: true
  57. })
  58. ])
  59. ]);
  60. /**
  61. * Use of this source code is governed by an MIT-style license that can be
  62. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  63. */
  64. const drawerMaskMotion = trigger('drawerMaskMotion', [
  65. transition(':enter', [style({ opacity: 0 }), animate(`${AnimationDuration.SLOW}`, style({ opacity: 1 }))]),
  66. transition(':leave', [style({ opacity: 1 }), animate(`${AnimationDuration.SLOW}`, style({ opacity: 0 }))])
  67. ]);
  68. /**
  69. * Use of this source code is governed by an MIT-style license that can be
  70. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  71. */
  72. const fadeMotion = trigger('fadeMotion', [
  73. transition('* => enter', [style({ opacity: 0 }), animate(`${AnimationDuration.BASE}`, style({ opacity: 1 }))]),
  74. transition('* => leave, :leave', [style({ opacity: 1 }), animate(`${AnimationDuration.BASE}`, style({ opacity: 0 }))])
  75. ]);
  76. /**
  77. * Use of this source code is governed by an MIT-style license that can be
  78. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  79. */
  80. const helpMotion = trigger('helpMotion', [
  81. transition(':enter', [
  82. style({
  83. opacity: 0,
  84. transform: 'translateY(-5px)'
  85. }),
  86. animate(`${AnimationDuration.SLOW} ${AnimationCurves.EASE_IN_OUT}`, style({
  87. opacity: 1,
  88. transform: 'translateY(0)'
  89. }))
  90. ]),
  91. transition(':leave', [
  92. style({
  93. opacity: 1,
  94. transform: 'translateY(0)'
  95. }),
  96. animate(`${AnimationDuration.SLOW} ${AnimationCurves.EASE_IN_OUT}`, style({
  97. opacity: 0,
  98. transform: 'translateY(-5px)'
  99. }))
  100. ])
  101. ]);
  102. /**
  103. * Use of this source code is governed by an MIT-style license that can be
  104. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  105. */
  106. const moveUpMotion = trigger('moveUpMotion', [
  107. transition('* => enter', [
  108. style({
  109. transformOrigin: '0 0',
  110. transform: 'translateY(-100%)',
  111. opacity: 0
  112. }),
  113. animate(`${AnimationDuration.BASE}`, style({
  114. transformOrigin: '0 0',
  115. transform: 'translateY(0%)',
  116. opacity: 1
  117. }))
  118. ]),
  119. transition('* => leave', [
  120. style({
  121. transformOrigin: '0 0',
  122. transform: 'translateY(0%)',
  123. opacity: 1
  124. }),
  125. animate(`${AnimationDuration.BASE}`, style({
  126. transformOrigin: '0 0',
  127. transform: 'translateY(-100%)',
  128. opacity: 0
  129. }))
  130. ])
  131. ]);
  132. /**
  133. * Use of this source code is governed by an MIT-style license that can be
  134. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  135. */
  136. const notificationMotion = trigger('notificationMotion', [
  137. state('enterRight', style({ opacity: 1, transform: 'translateX(0)' })),
  138. transition('* => enterRight', [style({ opacity: 0, transform: 'translateX(5%)' }), animate('100ms linear')]),
  139. state('enterLeft', style({ opacity: 1, transform: 'translateX(0)' })),
  140. transition('* => enterLeft', [style({ opacity: 0, transform: 'translateX(-5%)' }), animate('100ms linear')]),
  141. state('enterTop', style({ opacity: 1, transform: 'translateY(0)' })),
  142. transition('* => enterTop', [style({ opacity: 0, transform: 'translateY(-5%)' }), animate('100ms linear')]),
  143. state('enterBottom', style({ opacity: 1, transform: 'translateY(0)' })),
  144. transition('* => enterBottom', [style({ opacity: 0, transform: 'translateY(5%)' }), animate('100ms linear')]),
  145. state('leave', style({
  146. opacity: 0,
  147. transform: 'scaleY(0.8)',
  148. transformOrigin: '0% 0%'
  149. })),
  150. transition('* => leave', [
  151. style({
  152. opacity: 1,
  153. transform: 'scaleY(1)',
  154. transformOrigin: '0% 0%'
  155. }),
  156. animate('100ms linear')
  157. ])
  158. ]);
  159. /**
  160. * Use of this source code is governed by an MIT-style license that can be
  161. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  162. */
  163. const ANIMATION_TRANSITION_IN = `${AnimationDuration.BASE} ${AnimationCurves.EASE_OUT_QUINT}`;
  164. const ANIMATION_TRANSITION_OUT = `${AnimationDuration.BASE} ${AnimationCurves.EASE_IN_QUINT}`;
  165. const slideMotion = trigger('slideMotion', [
  166. state('void', style({
  167. opacity: 0,
  168. transform: 'scaleY(0.8)'
  169. })),
  170. state('enter', style({
  171. opacity: 1,
  172. transform: 'scaleY(1)'
  173. })),
  174. transition('void => *', [animate(ANIMATION_TRANSITION_IN)]),
  175. transition('* => void', [animate(ANIMATION_TRANSITION_OUT)])
  176. ]);
  177. const slideAlertMotion = trigger('slideAlertMotion', [
  178. transition(':leave', [
  179. style({ opacity: 1, transform: 'scaleY(1)', transformOrigin: '0% 0%' }),
  180. animate(`${AnimationDuration.SLOW} ${AnimationCurves.EASE_IN_OUT_CIRC}`, style({
  181. opacity: 0,
  182. transform: 'scaleY(0)',
  183. transformOrigin: '0% 0%'
  184. }))
  185. ])
  186. ]);
  187. /**
  188. * Use of this source code is governed by an MIT-style license that can be
  189. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  190. */
  191. const tabSwitchMotion = trigger('tabSwitchMotion', [
  192. state('leave', style({
  193. display: 'none'
  194. })),
  195. transition('* => enter', [
  196. style({
  197. display: 'block',
  198. opacity: 0
  199. }),
  200. animate(AnimationDuration.SLOW)
  201. ]),
  202. transition('* => leave, :leave', [
  203. style({
  204. position: 'absolute',
  205. top: 0,
  206. left: 0,
  207. width: '100%'
  208. }),
  209. animate(AnimationDuration.SLOW, style({
  210. opacity: 0
  211. })),
  212. style({
  213. display: 'none'
  214. })
  215. ])
  216. ]);
  217. /**
  218. * Use of this source code is governed by an MIT-style license that can be
  219. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  220. */
  221. const thumbMotion = trigger('thumbMotion', [
  222. state('from', style({ transform: 'translateX({{ transform }}px)', width: '{{ width }}px' }), {
  223. params: { transform: 0, width: 0 }
  224. }),
  225. state('to', style({ transform: 'translateX({{ transform }}px)', width: '{{ width }}px' }), {
  226. params: { transform: 100, width: 0 }
  227. }),
  228. transition('from => to', animate(`300ms ${AnimationCurves.EASE_IN_OUT}`))
  229. ]);
  230. /**
  231. * Use of this source code is governed by an MIT-style license that can be
  232. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  233. */
  234. const zoomBigMotion = trigger('zoomBigMotion', [
  235. transition('void => active', [
  236. style({ opacity: 0, transform: 'scale(0.8)' }),
  237. animate(`${AnimationDuration.BASE} ${AnimationCurves.EASE_OUT_CIRC}`, style({
  238. opacity: 1,
  239. transform: 'scale(1)'
  240. }))
  241. ]),
  242. transition('active => void', [
  243. style({ opacity: 1, transform: 'scale(1)' }),
  244. animate(`${AnimationDuration.BASE} ${AnimationCurves.EASE_IN_OUT_CIRC}`, style({
  245. opacity: 0,
  246. transform: 'scale(0.8)'
  247. }))
  248. ])
  249. ]);
  250. const zoomBadgeMotion = trigger('zoomBadgeMotion', [
  251. transition(':enter', [
  252. style({ opacity: 0, transform: 'scale(0) translate(50%, -50%)' }),
  253. animate(`${AnimationDuration.SLOW} ${AnimationCurves.EASE_OUT_BACK}`, style({
  254. opacity: 1,
  255. transform: 'scale(1) translate(50%, -50%)'
  256. }))
  257. ]),
  258. transition(':leave', [
  259. style({ opacity: 1, transform: 'scale(1) translate(50%, -50%)' }),
  260. animate(`${AnimationDuration.SLOW} ${AnimationCurves.EASE_IN_BACK}`, style({
  261. opacity: 0,
  262. transform: 'scale(0) translate(50%, -50%)'
  263. }))
  264. ])
  265. ]);
  266. /**
  267. * Use of this source code is governed by an MIT-style license that can be
  268. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  269. */
  270. /**
  271. * Generated bundle index. Do not edit.
  272. */
  273. export { AnimationCurves, AnimationDuration, collapseMotion, drawerMaskMotion, fadeMotion, helpMotion, moveUpMotion, notificationMotion, slideAlertMotion, slideMotion, tabSwitchMotion, thumbMotion, treeCollapseMotion, zoomBadgeMotion, zoomBigMotion };
  274. //# sourceMappingURL=ng-zorro-antd-core-animation.mjs.map