Javascript 为什么'；如果元素从“无”变为“显示块”，任何css转换都不起作用吗？

考虑以下场景：

$（“.tab”）。单击（函数（）{
var位置=$（this.index（“.tabs.tab”）；
$（“.content>div”）.removeClass（“显示”）.removeClass（“活动”）；
$（“.content>div”）.eq（position）.addClass（“活动”）；
//活动类使显示延迟，然后通过显示类更改不透明度
$（“.content>div”）.eq（position）.addClass（“显示”）；
});
.tabs{
浮动：左；
背景：#ccc；
边缘底部：10px；
}
.标签{
浮动：左；
右边框：2倍纯白；
填充：15px；
}
.内容{
浮动：左；
宽度：100%；
}
.content>div{
填充：15px；
背景：#999；
过渡：放松；
不透明度：0；
显示：无；
}
.content>.active{
显示：块；
}
.内容.展示{
不透明度：1；
}

表1
表2
表3
内容1
内容2
内容3
要回答标题问题，并非所有CSS属性都可以设置动画


显示
不可设置动画
不透明度
可设置动画


进一步阅读：

Mozilla开发者网络


为了演示，下面是一个选项卡式内容淡入淡出的示例，它仅使用CSS伪类
：target
（无需在jQuery或javascript中编写任何脚本）：


。选项卡式内容{
位置：相对位置；
}
a[class^=“tab”]{
显示：内联块；
浮动：左；
高度：60px；
线高：60px；
边缘底部：10px；
填充：0 15px；
颜色：#000；
背景色：#ccc；
右边框：2倍纯白；
文字装饰：无；
过渡：背景色1s放松；
}
div[id^=“content”]{
位置：绝对位置；
顶部：62px；
左：0；
宽度：100%；
填充：15px；
文本对齐：居中；
字体大小：72px；
不透明度：0；
框大小：边框框；
过渡：放松；
}
.表1：悬停，
#内容1{
颜色：rgb（255255）；
背景色：rgb（255,0,0）；
}
.表2：悬停，
#内容2{
颜色：rgb（255255）；
背景色：rgb（0127,0）；
}
.表3：悬停，
#内容3{
颜色：rgb（0,0,0）；
背景色：rgb（255255,0）；
}
div[id^=“content”]：目标{
不透明度：1；
}

内容1
内容2
内容3
评论不用于扩展讨论；这段对话已经结束。