javascript - 旋转图像和隐藏菜单

Question

我真的很喜欢他们在这里的导航，我主要想知道他们是如何将图像转得如此流畅（我假设是一个 jQuery 插件，但菜单图标本身不转），以及菜单是如何打开的并关闭单击图像。

我试图查看他们的源代码，但 CSS 难以辨认。

PS Everything 也可以在 IE 中使用。

Answer 1

他们正在使用CSS 过渡。

要转动他们使用的图像：

.active .icon-menu {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

并为它制作动画，他们使用：

.icon-menu {
    transition: transform .3s cubic-bezier(0.785,0.135,0.15,0.86);
    -moz-transition: -moz-transform .3s cubic-bezier(0.785,0.135,0.15,0.86);
    -webkit-transition: -webkit-transform .3s cubic-bezier(0.785,0.135,0.15,0.86);
    -o-transition: -o-transform .3s cubic-bezier(0.785,0.135,0.15,0.86);
}

定义了这些样式后，动画基本上是通过.active在相应<a>元素上添加或删除类来触发的。