CSS transition-behavior让display none也有动画效果

普通显示隐藏出现动画效果（如果设置了diaplay:none隐藏，然后用JS显示，动画效果transition是无效的）

一、元素先显示，透明度0，然后下个执行设置透明度1

 

.element.active{
  display:block;
  animation:fadeIn .2s both;
}
@keyframes{
  from{opacity:0;}
  to{opacity:1;}
}

 

二、transition-behavior属性

<!--html-->
<button id="trigger">图片显示与隐藏</button>
<img id="target" src="1.jpg" />

<!--js-->
trigger.onclick = function () {
    target.toggleAttribute('hidden');    
};

<!--css-->
img {
    transition: .25s allow-discrete;
    opacity: 1;
}

img[hidden] {
    opacity: 0;
}

三、使用@starting-style规则声明过渡起点

 

img {
    transition: .25s allow-discrete;
    opacity: 1;
    @starting-style {
      opacity: 0;
    }
}

 

 

 

原文来自鑫大佬：https://www.zhangxinxu.com/wordpress/2024/06/css-transition-behavior/