如何快速实现 materializecss 侧边栏导航打开过渡?
How to make materializecss sidebar nav opening transition fast?
我正在使用 Materializecss 边栏导航。它工作正常。但我想让侧边栏打开过渡快。
我试过这个例子:
Example
这是我的代码
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<a href="#user">
<img class="circle" src="images/yuna.jpg">
</a>
<a href="#name">
<span class="white-text name">John Doe</span>
</a>
<a href="#email">
<span class="white-text email">jdandturk@gmail.com</span>
</a>
</div>
</li>
<li>
<a href="#!">
<i class="material-icons">cloud</i>First Link With Icon</a>
</li>
<li>
<a href="#!">Second Link</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a class="subheader">Subheader</a>
</li>
<li>
<a class="waves-effect" href="#!">Third Link With Waves</a>
</li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.sidenav').sidenav();
});
</script>
我怎样才能快速快速地切换侧边栏导航打开过渡?
使用选项 inDuration
(如您提供的 link 所示)。
$(document).ready(function () {
$('.sidenav').sidenav({inDuration: 100});
});
我正在使用 Materializecss 边栏导航。它工作正常。但我想让侧边栏打开过渡快。 我试过这个例子: Example
这是我的代码
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<a href="#user">
<img class="circle" src="images/yuna.jpg">
</a>
<a href="#name">
<span class="white-text name">John Doe</span>
</a>
<a href="#email">
<span class="white-text email">jdandturk@gmail.com</span>
</a>
</div>
</li>
<li>
<a href="#!">
<i class="material-icons">cloud</i>First Link With Icon</a>
</li>
<li>
<a href="#!">Second Link</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a class="subheader">Subheader</a>
</li>
<li>
<a class="waves-effect" href="#!">Third Link With Waves</a>
</li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.sidenav').sidenav();
});
</script>
我怎样才能快速快速地切换侧边栏导航打开过渡?
使用选项 inDuration
(如您提供的 link 所示)。
$(document).ready(function () {
$('.sidenav').sidenav({inDuration: 100});
});