动画

动画

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

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

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

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

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

动画 - 图2

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