我有一个菜单触发器,右下方有一个箭头。当我点击触发器时,菜单显示但我希望箭头以180度旋转。我尝试使用jQuery动画,但没有工作。这是我的{ {3}}
$('#slide-trigger').on('click', function () {
$('#slide-nav > ul').slideToggle(400, function () {
$(this).toggleClass('showing');
});
$('#slide-trigger > span').animate({ 'transform' : 'rotateY(180deg)' });
});
答案 0 :(得分: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>▼</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>
答案 1 :(得分:1)
好的,基于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/