使用JQuery.animate（）插件中的CSS transform属性在单击时旋转跨度

我有一个菜单触发器，它的右边有一个箭头。当我单击触发器时，菜单会显示，但我希望箭头以180度旋转。我用jQuery动画尝试过，但没有成功。这是我的

---

据我所知，基本动画无法为非数字CSS属性设置动画。因此，我建议您提供

.toggleClass

JQuery插件，以便于使用

更新：这里的数值即度的

180

导致了问题

$（“#滑动触发器”）。在（'click'，函数（）{
$（'#幻灯片导航>ul'）。幻灯片切换（400，功能（）{
$（this.toggleClass（'showing'）；
});
$（'#滑动触发器>span'）。切换类（'transform-class'）；
});
滑动导航{
位置：固定；
显示：内联块；
顶部：100px；
左：0；
}
#滑动导航{
填充：0；
显示：无；
}
#幻灯片导航ulli{
位置：相对位置；
宽度：100%；
填充：7px 20px；
}
#幻灯片导航ul li a{
过渡：均为0.3秒；
}
#滑动导航ul.激活a{
颜色：rgba（0,0,0,75）；
}
#滑动导航ul.激活：之前{
内容：“；
宽度：15px；
高度：1.5px；
背景色：黑色；
位置：绝对位置；
最高：50%；
左：0；
}
#滑动触发器{
字号：1.4em；
光标：指针；
利润率：20px0；
}
#滑动触发跨度{
字号：0.8em；
}
.变换类
{
显示：内联块；
变换：rotateX（180度）！重要；
}

单击此处▼

好的，根据divy3993提供的答案，我用了他的小提琴，但添加了以下内容：

.transf {
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    display:inline-block;
    transform:rotateX(180deg);
}

如您所见，我添加了“transition”属性并删除了“！important”标记

现在我知道了，我说过旋转速度是1。开始面朝下2。快速向右旋转90度3。最后旋转180度，面朝上。然而，这将需要一个不同的解决方案

如果您对我提供的解决方案感到满意，很好，如果不让我知道，我可以创建一个“关键帧”动画，它将为您提供我刚才描述的平滑旋转。正如您所注意到的，我当前的解决方案将设置某种“翻转”旋转的动画

**更新**我忘了包括我的小提琴链接-

让我知道这是否对您有效

-------第二次更新--------

关键帧非常简单-这是一个非常简单的关键帧示例：

@-webkit-keyframes rotate-rt {
  0% {    -webkit-transform: rotate(0deg); }
  50% {   -webkit-transform: rotate(-90deg); }
  100% {   -webkit-transform: rotate(-180deg); }
}

你可以看到我设置了百分比，这些代表完成的百分比。因此，在50%时，它将旋转到-90度，当它完成时，它将从其初始点旋转-180度。在动画中放置的步数越多，动画就会越平滑。您还需要切换类以使其工作，因为您将要对其设置动画，您将要对其设置动画。要做到这一点，只需添加以下“执行您的功能”：

$('#slide-trigger > span').toggleClass('initial transf');

如您所见，我在函数中添加了“initial”，还必须将“initial”作为类添加到span元素中。单击后，这些类将相互切换

要启动关键帧/动画，需要将以下内容应用于要设置动画的类。由于“.tranf”是打开菜单时应用的类，因此您需要将其应用于该类：

-webkit-animation-name: rotate-rt;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;

---

请注意，动画名称与我命名的关键帧相同。这里有一些关于这个问题的很好的支持文档：

谢谢，这非常有效，我还为span添加了一个过渡规则以实现效果：DOk great，Ye it将实现过渡效果。无论如何，很高兴它帮助了你。：）您希望它旋转还是简单地翻转？因为我对旋转的理解就是旋转的动画。我问，因为我说的是选择的答案，箭头并没有像反转方向那样旋转。澄清是不必要的，只是好奇。是的，你是对的，我想让它旋转，但我不知道如何做到这一点。你能帮我吗？当然可以，但你想让它怎么旋转？比如说，它面朝下（默认-关闭菜单）-单击，箭头将指向上方。您想让它向上向右旋转还是向左旋转？应该是快速旋转吗？等等。请给我提供一些关于你如何想象它的运作的细节。非常感谢！我希望它能快速地向上旋转，我认为这样看起来不错。我不知道为什么人们会要求一些东西，而接受其他东西。如果你得到一个答案，而其他人只是修改。你必须投赞成票，但接受它。。。。？实际答案值得接受。我喜欢它，但效果与上面的答案稍有相同。据我所知，我是否需要使用关键帧使其像上面描述的u一样旋转？你不需要为我编写代码，但如果你能给我一些提示，因为我以前从未使用过关键帧。啊，对不起，我在他的小提琴中没有看到过渡效果，以为我提供了一个附加层。就您的问题而言，是的，您需要使用关键帧来实现这一点。让我为您收集一些信息，我认为这会有所帮助。我将用有关关键帧的更多信息更新我的答案-注意，我已经弄乱了我提供的小提琴-我将注释掉我在发布答案后所做的任何更改，这样，您就可以取消注释并在必要时使用它们了。没问题，我查看了更新后的JSFIDLE中的代码，对关键帧的工作原理有了一点了解：D。编辑：谢谢你的帮助，我现在知道它是如何工作的了！我已经注释掉了我的更新，所以你可以随意使用它。我已经提交了

-webkit-animation-name: rotate-rt;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;