我正在尝试为菜单使用一些 CSS3 过渡/变换效果,但在调试时我注意到了一些奇怪的行为。
除了 CSS3 过渡和转换,我还使用一个简单的 jQuery 函数来捕获点击并添加过渡延迟。
<button class="menu">
Show Navigation
</button>
<nav class="navigation">
<div class="row">
<div class="col">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
<div class="col">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</div>
</nav>
$(document).ready(function() {
$(".menu").click(function() {
$("body").toggleClass("menu-active");
$(".navigation li").each(function(index) {
$(this).css({
'transition-delay': (.25 * index) + 's'
});
});
});
});
.navigation {
display: none;
margin: 100px 0 0 0;
}
.navigation li {
margin: 0 0 20px 0;
opacity: 0;
transform: translate3d(7.5%, 0, 0);
}
.menu-active .navigation li {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s;
}
.navigation li a {
font-size: 24px;
line-height: 24px;
}
.menu-active .navigation {
display: block;
}
这是我的代码的 jsfiddle:
https://jsfiddle.net/zeropsi/8vprw45y/
现在,如您所见,单击按钮时不会出现过渡/变换效果,但是,如果您检查元素(我使用的是 Chrome)并单击列表元素,您可以看到过渡发生。
关于可能导致问题的原因有什么想法吗?
最佳答案
改变你的CSS。 display: none
禁用动画。
.navigation {
opacity: 0;
margin: 100px 0 0 0;
}
/* ... */
.menu-active .navigation {
opacity: 1;
}
关于jquery - CSS3 过渡和转换元素的问题和代码检查异常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57170483/