使用 CSS transform 属性 in JQuery .animate() 插件使跨度在点击时旋转

Question

我有一个菜单触发器，它的右边有一个向下的箭头。当我单击触发器时，菜单会显示，但我希望箭头在 180deg.I 处旋转尝试使用 jQuery 动画但是 work.Here 不是我的 JSFIDDLE

$('#slide-trigger').on('click', function () {
    $('#slide-nav > ul').slideToggle(400, function () {
        $(this).toggleClass('showing');
    });
    $('#slide-trigger > span').animate({ 'transform' : 'rotateY(180deg)' });
});

Answer 1

据我所知，基本动画无法为非数字 CSS 属性设置动画。所以我建议你给 .toggleClass JQuery 插件，这样它就很容易使用。

更新：这里的数值即180学位导致了问题。

    $('#slide-trigger').on('click', function () {
        $('#slide-nav > ul').slideToggle(400, function () {
            $(this).toggleClass('showing');
        });
        $('#slide-trigger > span').toggleClass('transform-class');
    });

#slide-nav {
    position: fixed;
    display: inline-block;
    top: 100px;
    left: 0;
}

#slide-nav ul{
    padding:0;
    display:none;
}

#slide-nav ul li {
    position:relative;
    width: 100%;
    padding: 7px 20px;
}

#slide-nav ul li a {
    transition: all 0.3s;
}

#slide-nav ul .active a {
    color: rgba(0,0,0,.75);
}

#slide-nav ul .active:before{
        content: "";
        width: 15px;
        height: 1.5px;
        background-color: black;
        position: absolute;
        top: 50%;
        left: 0;
}


#slide-trigger {
    font-size: 1.4em;
    cursor: pointer;
    margin: 20px 0;
}
#slide-trigger span {
    font-size: 0.8em;
}

.transform-class
{
    display:inline-block;
    transform:rotateX(180deg) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav id="slide-nav">
                <div id="slide-trigger">Click here <span>&#9660</span></div>
                <ul>
                    <li  class="active"><a href="#">Link1</a></li>
                    <li><a href="#">Link2</a></li>
                    <li><a href="#">Link3</a></li>
                    <li><a href="#">Link4</a></li>
                </ul>
            </nav>

DEMO : FIDDLE.

Answer 2

好的，基于 divy3993 提供的答案 - 我使用了他的 Fiddle 但添加了以下内容：

.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 度完成，最后面朝上。但是，这需要不同的解决方案。

如果您对我提供的解决方案感到满意，那太好了，如果不满意请告诉我，我可以创建一个 "keyframe" 动画，让您实现我刚才描述的平滑旋转。您会注意到，我当前的解决方案将动画化 "flip" 旋转。

** 更新 ** 我忘了包括我的 Fiddle link - https://jsfiddle.net/rockmandew/6j3xaq2d/1/

让我知道这是否适合您。

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

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

@-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" 作为 class 添加到 span 元素。单击时，这些 classes 将相互切换。

要启动 keyframes/animation，您需要将以下内容应用到您想要设置动画的 class。由于“.tranf”是打开菜单时应用的 class，因此您需要将其应用到那个 class:

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

注意动画名称是我命名关键帧的任何名称。这里有一些关于这个问题的很好的支持文档：https://css-tricks.com/snippets/css/keyframe-animation-syntax/

使用 CSS transform 属性 in JQuery .animate() 插件使跨度在点击时旋转

Make a span rotate on click using CSS transform property in JQuery .animate() plugin

html

jquery

animation

rotation