Question

我试着用css动画来解决，但遇到了这个问题。

我使用@keyframes from 0px to size进行了高度动画并且它正常工作，但是如果我想恢复动画from size to 0px并将display: none添加到父元素中不工作。那么显示触发器早于动画呢？

您是否有一些建议如何通过css解决任务？

代码

＆＃13;

$('.toggle-nav').click(function (e) {
  e.preventDefault();

  $('nav').toggleClass('active');
});

＆＃13;

.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;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggle-nav" href="#">&#9776;</a>
<nav>
  <ul>
     <li><a>Item 1</a></li>
     <li><a>Item 2</a></li>
  </ul>
</nav>

＆＃13;

我的代码也在这里：https://jsfiddle.net/guar47/w6o8a52b/11/

Answer 1

您只需要使用以下代码替换您的代码：

$('.toggle-nav').click(function (e) {
  e.preventDefault();
  $('nav').slideToggle();
});

然后删除您用于动画的其他CSS。

Answer 2

按照您编写的方式，元素将在动画开始之前隐藏。如果您想恢复nav li的可见状态，则首先需要完成动画，然后隐藏它。这可以通过向animationend或nav添加nav li事件来完成，处理程序可以在animationend被触发后立即隐藏它。

我为此重写了一些东西。请注意，我在您的CSS中添加了另一个名为revert的CSS，它运行您的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="#">&#9776;</a>
<nav>
  <ul>
     <li><a>Item 1</a></li>
     <li><a>Item 2</a></li>
  </ul>
</nav>

为什么带显示器的高度动画：无效并不起作用？

2 个答案: