回到课程

让飞机动起来(CSS)

重要程度: 5

生成如下图的动画(点击显示):

  • 点击后,图片会从 40x24px 变为 400x240px (变大十倍)。
  • 动画持续三秒。
  • 在动画结束后,输出:“Done!”。
  • 动画过程中,如果飞机被点击,这些操作不应该打断动画。

打开一个任务沙箱。

使用 CSS 为 widthheight 属性生成动效:

/* 原始类 */

#flyjet {
  transition: all 3s;
}

/* JS 添加的 .growing */
#flyjet.growing {
  width: 400px;
  height: 240px;
}

请注意,transitionend 会被触发两次 —— 每个属性触发一次。因此,如果我们不进行额外检查的话,这条信息会显示两次。

使用沙箱打开解决方案。