我制作了一个小的切换按钮,点击它会打开一个隐藏的菜单,同时旋转一个十字。
我已经使用 css 动画让十字旋转并出现了子菜单,但我需要它以动画方式很好地滑出而不是仅仅出现。从 display none 到 display block 似乎没有使用 css 动画,这有什么办法吗?
或者 css 动画在显示样式上不起作用?
我有一把 fiddle here
<nav class="filter_nav inner">
<ul class="subnav">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
<ul class="toggleNavOuter">
<li class="toggleNavButton">+</li>
<li>Filter</li>
</ul>
</nav>
这里是 JS..
$(function(){
$(".toggleNavOuter").click(function () {
$(".subnav").toggleClass("active");
$(".toggleNavOuter").toggleClass("active");
$(".toggleNavButton").toggleClass("active");
});
});
最佳答案
您不能为 display
属性设置动画,您需要为 width
设置动画。
一个选项可以是:添加
width:0
而不是display:none
.filter_nav .subnav { width:0; transition: width 0.8s ease-in-out 0s; }
然后在
active
上放置一些固定宽度:.filter_nav .subnav.active { width:300px; }
检查这个Demo Fiddle
关于jQuery 切换不触发 css 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26466663/