[英]Why height animation with display: none are isn't working?
I try to figure out with css animation, but faced to this issue. 我试图弄清楚css动画,但是面对这个问题。
I did the height animation with @keyframes
from 0px to size
and it's working, but if I want to revert animation from size to 0px
and add display: none
to parent element it isn't working. 我用
@keyframes
from 0px to size
高度进行了高度动画,并且可以正常工作,但是如果我想将动画from size to 0px
并添加display: none
到父元素,那是行不通的。 So display trigger earlier than animation did? 那么显示触发要比动画更早吗?
Do you have some advice how to resolve task like that through css? 您对如何通过CSS解决类似任务有什么建议吗?
Code 码
$('.toggle-nav').click(function (e) { e.preventDefault(); $('nav').toggleClass('active'); });
.toggle-nav { padding: 7px 12px; text-decoration: none; background: #fff; } nav li { background: #fff; color: #000; animation: slide-down-list-revert .3s linear 0s; } nav { display: none; } nav.active { display: block; } nav.active li { display: block; animation: slide-down-list .3s linear 0s; } @keyframes slide-down-list { from { height: 0; } to { height: 30px; } } @keyframes slide-down-list-revert { from { height: 30px; } to { height: 0; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="toggle-nav" href="#">☰</a> <nav> <ul> <li><a>Item 1</a></li> <li><a>Item 2</a></li> </ul> </nav>
Also my code is here: https://jsfiddle.net/guar47/w6o8a52b/11/ 我的代码也在这里: https : //jsfiddle.net/guar47/w6o8a52b/11/
You just need to replace your code with below code: 您只需要用以下代码替换代码:
$('.toggle-nav').click(function (e) {
e.preventDefault();
$('nav').slideToggle();
});
Then remove other CSS that you are using for animation. 然后删除用于动画的其他CSS。
With the way you have written it, the element will be hidden before your animation even begins. 按照您的编写方式,该元素将在动画开始之前被隐藏。 If you want to revert the visible state of the
nav li
, you first need to complete the animation and then hide it. 如果要还原
nav li
图标的可见状态,则首先需要完成动画, 然后将其隐藏。 This can be done by adding an animationend
event to the nav
or nav li
and handler can hide it as soon as the animationend
is fired. 这可以通过在
nav
或nav li
添加animationend
事件来实现,并且一旦animationend
被触发,处理程序就可以将其隐藏。
I've rewritten something to that effect. 我已经重写了一些内容。 Note that I added another class to your CSS called
revert
which runs your slide-down-list-revert
animation. 请注意,我在您的CSS中添加了另一个名为
revert
类,该类运行您的slide-down-list-revert
动画。
$('.toggle-nav').click(function (e) { e.preventDefault(); var nav = $('nav'); if(!nav.hasClass('active')){ nav.toggleClass('active'); } else{ nav.addClass('revert'); } }); $('nav').on('animationend', function(){ if ($(this).hasClass('revert')){ $('nav').toggleClass('revert active'); } });
.toggle-nav { padding: 7px 12px; text-decoration: none; background: #fff; } nav li { background: #fff; color: #000; animation: slide-down-list-revert .3s linear 0s; } nav { display: none; } nav.active { display: block; } nav.active li { display: block; animation: slide-down-list .3s linear 0s; } nav.revert li{ animation: slide-down-list-revert .3s linear 0s; } @keyframes slide-down-list { from { height: 0; } to { height: 30px; } } @keyframes slide-down-list-revert { from { height: 30px; } to { height: 0; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="toggle-nav" href="#">☰</a> <nav> <ul> <li><a>Item 1</a></li> <li><a>Item 2</a></li> </ul> </nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.