让飞机动起来（CSS）
我们希望将这个开源项目提供给全世界的人。请帮助我们将教程的内容 翻译为你所掌握的语言 对应的版本。
è´­ä¹°EPUB/PDF
教程路线图
回到课程

让飞机动起来（CSS）

重要程度: 5

生成如下图的动画（点击显示）：

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

打开一个任务沙箱。

使用 CSS 为 width 和 height 属性生成动效：

/* 原始类 */

#flyjet {
  transition: all 3s;
}

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

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

使用沙箱打开解决方案。