By

Contents

适当的动画效果可以使得我们的网页富有活力、充满新意。通常我们实现动画效果主要通过 css3 和 transition。其中 transition 通常是性能最好的。然而，最近我在 transition 上遇到了一个奇怪的问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// draw.js
var jctx = $("<canvas height='50px' width='50px'></canvas>").css({
    "position": "absolute",
    "top": 50,
    "left": 50,
    "transition": "top 1s"
});
$("#view").append(jctx);
var ctx = jctx[0].getContext("2d");
ctx.beginPath();
ctx.arc(25, 25, 25, 0, 2 * Math.PI);
ctx.fill();
jctx.css({
    "top": 100
}, 0);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- draw.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CANVAS DRAW</title>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <div id="view"></div>
    <script src="./draw.js"></script>
</body>
</html>

上面的代码是出现一个圆向下移动的动画。然而它现在并没有动，看起来 transition 失效了。原因是因为连续的更改 css 会被视为一次 css 调整，故而 transition 不会有效果。因此我们要用 setTimeout 函数来“打断”它们：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// draw.js
var jctx = $("<canvas height='50px' width='50px'></canvas>").css({
    "position": "absolute",
    "top": 50,
    "left": 50,
    "transition": "top 1s"
});
$("#view").append(jctx);
var ctx = jctx[0].getContext("2d");
ctx.beginPath();
ctx.arc(25, 25, 25, 0, 2 * Math.PI);
ctx.fill();
setTimeout(function () {
    jctx.css({
        "top": 100
    });
}, 0);

这样，虽然实际上并没有延迟，transition 生效了。这样，我们可以不断地通过这种方式，让它一步一步做出各种动画效果。

Contents