Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

transition

介绍

用于设置元件过渡动画效果，是 transition-property、transition-duration、transition-timing-function、transition-delay 的简写属性。

使用示例

css-apisrc/transition/App.tsx
预览

语法

/* Apply to 1 property */
/* property name | duration */
transition: background-color 4s;

/* property name | duration | delay */
transition: opacity 4s 1s;

/* property name | duration | easing function */
transition: background-color 4s ease-in-out;

/* property name | duration | easing function | delay */
transition: background-color 4s ease-in-out 1s;

/* Apply to 2 properties */
transition:
  background-color 4s,
  opacity 4s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Clear all transition animation.*/
transition: none;

形式定义

初始值空值
适用元素所有元件
是否支持继承no
是否支持动画no

形式语法

transition: <transition-property> || <transition-duration> ||
  <transition-timing-function> || <transition-delay>;

动画事件

扩展阅读

注意事项

INFO
INFO

由于 reactLynx 的属性提取问题，写在 Constructor 里的属性不会被提取到首屏，而是会通过数据回设更新，因此可能会触发预期之外的动画

兼容性

Loading...

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。