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

Question

而不是使用纯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;
}

Answer 1

使用.slideToggle () tem允许你再次滑动属于jquery可以看到here