CSS 为页面输入动画

Question

我现在有这张动画幻灯片，它适用于悬停事件。但现在我希望该动画在页面加载后立即工作，并且每当窗口宽度更改为低于 900 像素时，它应该滑出。

这是我的 HTML：

<div class="left-nav pack-container slide-wrapper">
  <ul class="nav nav-pills nav-stacked" id="left-nav-list">
    <li class="active"><a href="#">Sections</a></li>
    <li><a href="#">Travels</a></li>
    <li><a href="#">Services</a></li>
    <li class="active"><a href="#">Recently Viewed</a></li>
  </ul>
</div>

这是我的 CSS 代码：

#left-nav-list {
position: relative;
left: -350px;
transition: 1s;
overflow: hidden;
width: 200px;
}

.slide-wrapper:hover #left-nav-list {
transition: 1s;
left:0;
}

我尝试获取 id 并执行 classList.add，但没有成功。

使用了以下附加功能：

• AngularJS

• 引导

Fiddle

谢谢

Answer 1

您可以给它一些默认的、未加载的类，然后在窗口加载时取消设置该类。这就是 CSS 的样子：

#left-nav-list {
  position: relative;
  transition: 1s;
  overflow: hidden;
  width: 200px;
  left:0;
}

#left-nav-list.notLoaded {
  left: -350px;
}

---

这是一个简单的例子：

window.onload = function() {
  document.getElementById('left-nav-list').classList.remove('notLoaded');
}

#left-nav-list {
  position: relative;
  transition: 1s;
  overflow: hidden;
  width: 200px;
  left:0;
}

#left-nav-list.notLoaded {
  left: -350px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="left-nav pack-container slide-wrapper">
  <ul class="nav nav-pills nav-stacked notLoaded" id="left-nav-list">
    <li class="active"><a href="#">Sections</a></li>
    <li><a href="#">Travels</a></li>
    <li><a href="#">Services</a></li>
    <li class="active"><a href="#">Recently Viewed</a></li>
  </ul>
</div>

https://jsfiddle.net/k3zr7a0v/1/

Answer 2

试试看

@media (max-width:900px) and (min-width:400px) {

   #left-nav-list {
    transition: 1s;
    left:0px !important;
    }

}​