动画

Kraken 提供了 Transition 的能力以便开发者通过该属性来开发一个过渡的动画。

下面提供来一个根据点击来移动球位置的例子，以查看实际 Transition 的效果。

示例：

  1. setTimeout(() => {
  2.   const f = document.getElementById('foo');
  3.   f.style.left = '200px';
  4.   f.style.top = '200px';
  5.   f.style.background = 'blue';
  6. }, 1000);
  8. <div
  9.   id="foo"
  10.   style={{
  11.     borderRadius: '50px',
  12.     width: '50px',
  13.     height: '50px',
  14.     background: 'red',
  15.     position: 'absolute',
  16.     top: 0,
  17.     left: 0,
  18.     transition: 'all 1s',
  19.   }}
  20. ></div>;

渲染效果：

动画 - 图1
请选择以下任意一种方式预览：
1. 安装 Kraken CLI，然后复制以下命令到命令行中运行：
2. 在 Android 手机上先下载 Play Kraken App，然后打开 App 扫描下方二维码预览：
动画 - 图2

更详细的 API 请参考开发文档。