Jquery CSS转换不'；不要用汉堡按钮

我做了一个汉堡包按钮，我正在尝试动画跨度创建一个十字架

我的转换不起作用，我不知道为什么。。。 我发现有时转换在chrome上不起作用，所以我使用了webkit前缀，但没有帮助：(

这是我的HTML代码：

<div class="main__box__nav__hamburger">
    <span class="line line1"></span>
    <span class="line line2"></span>
    <span class="line line3"></span>
</div>

---

这是因为您将转换应用于父元素（汉堡本身），而不是其子元素。请记住，

transition

不是继承的

将

转换

属性移动到

行

选择器，它将工作：

.line {
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) .5s;
}

请参见下面的概念证明（我添加了一些最小的JS，因此单击汉堡将切换可视化转换所需的

close

类）：

var burger=document.querySelector（'.main\uuuuuu box\uuuuu nav\uuuuu hamburger'）；
burger.addEventListener（'click'，function（）{
this.classList.toggle（'close'）；
})；

.main\uuuuuu box\uuuuu nav\uuuu汉堡{
最小宽度：30px；
高度：20px；
利润率：45像素10像素；
位置：相对位置；
}
.线路{
位置：绝对位置；
最小宽度：30px；
高度：4px；
边界半径：2px；
背景：#000；
过渡：全立方贝塞尔（0.25,0.1,0.28,1.54）；
}
.line2{
顶部：8px；
}
.line3{
顶部：16px；
}
.main\uuuuu box\uuuuu nav\uuuuu hamburger.close.line 1{
变换：旋转（45度）；
最高：50%；
}
.main\uuuuu box\uuuu nav\uuu hamburger.close.line 2.main\uuuu box\uuuu nav\uuu hamburger.close.line 3{
变换：旋转（-45度）；
最高：50%；
}

---

这是因为您将转换应用于父元素（汉堡本身），而不是其子元素。请记住，

转换

不是继承的

将

转换

属性移动到

行

选择器，它将工作：

.line {
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) .5s;
}

请参见下面的概念证明（我添加了一些最小的JS，因此单击汉堡将切换可视化转换所需的

close

类）：

var burger=document.querySelector（'.main\uuuuuu box\uuuuu nav\uuuuu hamburger'）；
burger.addEventListener（'click'，function（）{
this.classList.toggle（'close'）；
})；

.main\uuuuuu box\uuuuu nav\uuuu汉堡{
最小宽度：30px；
高度：20px；
利润率：45像素10像素；
位置：相对位置；
}
.线路{
位置：绝对位置；
最小宽度：30px；
高度：4px；
边界半径：2px；
背景：#000；
过渡：全立方贝塞尔（0.25,0.1,0.28,1.54）；
}
.line2{
顶部：8px；
}
.line3{
顶部：16px；
}
.main\uuuuu box\uuuuu nav\uuuuu hamburger.close.line 1{
变换：旋转（45度）；
最高：50%；
}
.main\uuuuu box\uuuu nav\uuu hamburger.close.line 2.main\uuuu box\uuuu nav\uuu hamburger.close.line 3{
变换：旋转（-45度）；
最高：50%；
}

您如何启动动画？您如何启动动画？哇！非常感谢：）它工作正常！我不知道过渡不是遗传的。哇！非常感谢：）它很有效！我不知道过渡不是遗传的。