动画

动画

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

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

示例：

setTimeout(() => {
  const f = document.getElementById('foo');
  f.style.left = '200px';
  f.style.top = '200px';
  f.style.background = 'blue';
}, 1000);

<div
  id="foo"
  style={{
    borderRadius: '50px',
    width: '50px',
    height: '50px',
    background: 'red',
    position: 'absolute',
    top: 0,
    left: 0,
    transition: 'all 1s',
  }}
></div>;

渲染效果 ：

请选择以下任意一种方式预览：

1. 安装 Kraken CLI，然后复制以下命令到命令行中运行：

kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-animation.js

2. 在 Android 手机上先下载 Play Kraken App，然后打开 App 扫描下方二维码预览：

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