display 和 transition 冲突

我在用display:none 然后再dispaly：block 用transition 做动画过渡没有反应
请问怎么解决呀我不想它占用原来空间

display不会触发transition的过度效果，可以用height去做，高度设置为0隐藏，设置为具体的高度则显示

那试试这个

.element {
  visibility: hidden; /* 隐藏元素 */
  opacity: 0; /* 透明度设置为 0 */
  transition: visibility 0s, opacity 0.5s; /* 过渡效果 */
}

.element.show {
  visibility: visible; /* 显示元素 */
  opacity: 1; /* 将透明度设置为 1 */
}

你好 过渡只能用在一些 属性数值变化的属性上 例如 高度从0到100 透明度0到1 而display:none 到block 这种 不会有过渡效果

把高度设置为0就没有占用空间了吧