在jQuery show/hide上使用纯CSS设置幻灯片切换动画

而不是使用纯Javascript来滑动切换

$('#div').toggleSlide('fast')

我只是想切换一下

$('#div').toggle()

并在CSS中设置显示/隐藏幻灯片过渡的动画。在不切换类以滑入滑出的情况下，这是可能的吗

我知道我可以像下面那样添加一个类并删除，但我想尝试将动画与开发人员完全分离。现在，设计师和开发者必须共同努力来实现任何动画

.hidden {
  position: absolute;
  list-style: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  padding: 10px;
  background-color: rgba(92, 91, 87, 0.9);
  -webkit-transition: opacity 600ms, visibility 600ms;
          transition: opacity 600ms, visibility 600ms;
}

.hidden.open {
  display: block;
   visibility: visible;
   opacity: 1;
   animation: fade 1s;
}

---

使用

.slideToggle（）

tem可以让你一次又一次地滑动，属于jquery。你可以看到

如果不切换类来滑入滑出，这是可能的吗？

是的，但是切换类是目前为止最简单、最好的方法1）这不是纯Javascript，而是使用jquery。2）

.toggle（）

只切换可见状态，因此不能对其使用转换。3） 切换类是最接近纯CSS的。如果可以的话，我强烈建议您这样做。考虑到您希望分离设计和开发逻辑的更新，这正是您应该在元素上切换类的原因。两个团队都需要知道的是要更改的类名。开发者然后切换它，设计师用CSS制作动画。好吧，我想我会这么做。我只是希望我的谷歌搜索能力不够好，有一个很好的解决办法。谢谢大家！只需让设计师省去CSS中的任何转换，所以悬停和切换只会使内容立即显示和隐藏。一旦开发人员完成了，设计师就可以通过简单地添加转换（正如您已经拥有的）来启动它。就我而言，他们应该一起工作。一个团队如何才能尽可能有效？比它们的各部分之和还要大，等等。你肯定不明白这个问题。