Question

我有一个菜单触发器，右下方有一个箭头。当我点击触发器时，菜单显示但我希望箭头以180度旋转。我尝试使用jQuery动画，但没有工作。这是我的{ {3}}

$('#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提供的答案 - 我使用了他的小提琴但添加了以下内容：

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

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

** 更新 **我忘记包含我的小提琴链接 - https://jsfiddle.net/rockmandew/6j3xaq2d/1/

请告诉我这是否可以作为您的解决方案。

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

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

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

您可以看到我设置百分比，这些代表完成百分比。因此在50％时它将旋转到-90度点，到它完成时它将从其初始点旋转-180度。放入动画的步骤越多，它就越平滑。您还需要使用toggleClasses来实现此功能，因为您要为其设置动画，您需要将其设置为动画。为此，您只需添加此功能：

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

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

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

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

请注意，动画名称是我命名为“关键帧”的名称。以下是有关此问题的一些很好的支持文档：https://css-tricks.com/snippets/css/keyframe-animation-syntax/

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

2 个答案: