Question

嗨:)我无法理解为什么我的箭无法以与用户点击它和下侧面板打开时动画相同的方式制作动画。我创建了两个css类：#EXTINF:-1 tvg-logo="http://randomUrl.com/icon.png",ABC HD http://StreamUrl.m3u8 #EXTINF:-1 tvg-logo="http://YetAnotherRandomUrl.com/icon.png",Discovery http://DisStreamUrl.m3u8 #EXTINF:-1 group-title="SERVER 1-Tv" tvg-logo="http://anotherRandomUrl.com/icon.png",NBC http://AnotherStreamUrl.m3u8和open，我使用了closed方法，但它似乎跳过toggleClass存在的事实。为什么？

CSS：

closed

JS：

nav.open #headerp i{
    transform:rotate(-180deg);
    transition-duration:0.5s;           
}

nav.closed i{
    transform:rotate(-180deg);
    transition-duration:2s;
}

Link to CodePen

Answer 1

您应该使用检查和更改：

$("nav li a i:first").on("click", function() {
    if ($("nav").hasClass("open")) {
        $("nav").toggleClass("close");
    } else {
        $("nav").toggleClass("open");
    }
});

Answer 2

问题可能是你的元素不是一个块元素，它是旋转所必需的。见下面的例子。

此外，你处于关闭和打开状态，旋转-180度...所以只要将任一类应用于元素，它将始终为-180。我在我的例子中将关闭设置为0旋转。

$(document).ready(function() {
    $('a').on('click', function() {
        $('a').toggleClass('open closed');
    });
});

.open span{
  display: inline-block;
  transform:rotate(-180deg);
  transition-duration:0.5s;           
}

.closed span{
  display: inline-block;
  transform:rotate(0deg);
  transition-duration:2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="open"><span>link</span></a>

Answer 3

如果您的导航栏上没有“关闭”课程，那么您将toggling课程“打开关闭”;它们将同时添加（和删除）'因为toggleClass将找不到要切换的现有类，添加\删除它们。

要获得所需的效果，您可以完全删除已关闭的类，为<i>（将为0deg）提供开始变换，并仅切换开放类。

<强> JS

$('nav').toggleClass('open');

<强> CSS

nav #headerp i {
  transform:rotate(0deg);
  transition-duration:0.5s;
}
nav.open #headerp i{
  transform:rotate(-180deg);
}

或者，如果你想保留你的封闭类，你需要给它一个0deg的起点（因为，它现在，它从-180deg旋转到-180deg）并包含你的导航栏。

<强> CSS

nav.closed #headerp i{
  transform:rotate(0deg);
  transition-duration:2s;
}

<强> HTML

<nav class="navbar closed">

否则，正如我上面所说，toggleClass将添加\删除“打开关闭”类。

在两个类之间切换不起作用

3 个答案: