边栏CSS转换未应用

Question

我试图添加一个转换，但它不起作用。

我在我的链接中添加了一个转换，并期望悬停状态发生变化。我经常使用转换，但有时这种情况会发生在我身上，我不知道为什么这个属性不起作用

这是我的代码：

<div id="sidebar">
<ul class="nav-main-ul">
<li class="nav-item"><a href="#"><i class="fa fa-home" style="padding-right: 13px"></i>Home</a></li>
<li class="nav-title">Airports</li>
<li class="nav-item">
<a href="javascript:void(0)"><i class="far fa-paper-plane" style="padding-right: 13px"></i>North Airports</a>
<ul class="nav-dropdown">
<li><a href="">LLBG | Tel-Aviv</a></li>
<li><a href="">LLSD | Sde Dov</a></li>
<li><a href="">LLHZ | Herzliya</a></li>
<li><a href="">LLHA | Haifa</a></li>
<li><a href="">LLIB | Rosh Pina</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#"><i class="far fa-paper-plane" style="padding-right: 13px"></i>South Airports</a>
<ul class="nav-dropdown">
<li><a href="">LLOV | Ovda</a></li>
<li><a href="">LLET | Eilat</a></li>
</ul>
</li>
<li class="nav-title">Airstrips</li>
<li class="nav-item">
<a href="#"><i class="far fa-paper-plane" style="padding-right: 13px"></i>North Airstrips</a>
<ul class="nav-dropdown">
<li><a href="">LLKS | Kiryat Shmona</a></li>
<li><a href="">LLBO | Habonim</a></li>
<li><a href="">LLMG | Megido</a></li>
</ul>                
</li>
<li class="nav-item">
<a href="#"><i class="far fa-paper-plane" style="padding-right: 13px"></i>South Airstrips</a>
<ul class="nav-dropdown">
<li><a href="">LLBS | Beer Sheva</a></li>
<li><a href="">LLMZ | Masada</a></li>
<li><a href="">LLEY | Ein Yahav</a></li>
<li><a href="">LLYO | Yotvata</a></li>
</ul>
</li>
<li class="nav-title">Miscellaneous</li>
<li class="nav-item"><a href="#"><i class="fa fa-headphones-alt" style="padding-right: 13px"></i>ATC Tools</a></li>
</ul>
</div>

CSS：

#sidebar {
position: fixed;
width: 200px;
height: 100%;
background-color: #151719;
margin-top: 13px;
list-style-type: none;
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
}
#sidebar.active {
left: -200px;
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
}

JS:

function toggleSidebar() {
document.getElementById("sidebar").classList.toggle('active');
}

过渡不起作用，我使用了Firefox，我也尝试了谷歌chrome，它使它跳到-200像素。

Answer 1

您将对left值进行转换，而left属性的默认值为auto，因此无法从auto转换为-200px，反之亦然。因此，您只需要为left设置一个初始值，例如#sidebar {left: 0}

var sidebarElement = document.getElementById("sidebar");
function toggleSidebar() {
sidebarElement.classList.toggle('active');
}

#sidebar {
left: 0;
position: fixed;
width: 200px;
height: 100%;
background-color: #151719;
margin-top: 30px;
list-style-type: none;
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
}
#sidebar.active {
left: -200px;
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
}

<div id="sidebar">
<ul class="nav-main-ul">
<li class="nav-item"><a href="#"><i class="fa fa-home" style="padding-right: 13px"></i>Home</a></li>
<li class="nav-title">Airports</li>
<li class="nav-item">
<a href="javascript:void(0)"><i class="far fa-paper-plane" style="padding-right: 13px"></i>North Airports</a>
<ul class="nav-dropdown">
<li><a href="">LLBG | Tel-Aviv</a></li>
<li><a href="">LLSD | Sde Dov</a></li>
<li><a href="">LLHZ | Herzliya</a></li>
<li><a href="">LLHA | Haifa</a></li>
<li><a href="">LLIB | Rosh Pina</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#"><i class="far fa-paper-plane" style="padding-right: 13px"></i>South Airports</a>
<ul class="nav-dropdown">
<li><a href="">LLOV | Ovda</a></li>
<li><a href="">LLET | Eilat</a></li>
</ul>
</li>
<li class="nav-title">Airstrips</li>
<li class="nav-item">
<a href="#"><i class="far fa-paper-plane" style="padding-right: 13px"></i>North Airstrips</a>
<ul class="nav-dropdown">
<li><a href="">LLKS | Kiryat Shmona</a></li>
<li><a href="">LLBO | Habonim</a></li>
<li><a href="">LLMG | Megido</a></li>
</ul>                
</li>
<li class="nav-item">
<a href="#"><i class="far fa-paper-plane" style="padding-right: 13px"></i>South Airstrips</a>
<ul class="nav-dropdown">
<li><a href="">LLBS | Beer Sheva</a></li>
<li><a href="">LLMZ | Masada</a></li>
<li><a href="">LLEY | Ein Yahav</a></li>
<li><a href="">LLYO | Yotvata</a></li>
</ul>
</li>
<li class="nav-title">Miscellaneous</li>
<li class="nav-item"><a href="#"><i class="fa fa-headphones-alt" style="padding-right: 13px"></i>ATC Tools</a></li>
</ul>
</div>
<button onclick="toggleSidebar()">Toggle Sidebar</button>

希望能帮忙。