为什么在选中的类上设置转换完全没有效果？

Question

我尝试创建无 JavaScript 的选项卡。
这有效，但现在我想要像 https://web.dev/articles/building/a-tabs-component

那样进行 CSS 转换

它的作用是

scroll-behavior: smooth;

我只想以不透明度淡入和淡出选项卡。
但这不起作用，我不知道为什么。
怎么了 ？
我不太明白为什么这不起作用，因此我无法修复它。

我尝试在不透明度、显示、有或没有缓入/缓出的情况下设置过渡，但它根本没有改变......

我也尝试过使用

scroll-behavior: smooth;

，但也没有效果。

请参阅我的 codepen 片段以获取完整示例： https://codepen.io/u155077/pen/oNmgLgM

注意：
这是关于 CSS 样式的。
请保持 100% 无 JavaScript。

    .rbTab
    {
        display: none;
        opacity: 0;
        transition: opacity 5s, display 1s;
    }




   .ContentTab
    {
        display: none;
        width: 630px;
        height: 180px;
        background-color: #FFFFFF;
    }
    
    
    .TitleTab
    {
        width: 630px;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
        /*background-color: #E5E5E5;*/
    }


    .rbTab
    {
        display: none;
        opacity: 0;

    }
    
    
    .rbTab1:checked ~ .ContentTab1
    {
        display: block;
        opacity: 1;


        -webkit-transition: display 2s ease-in;
        -moz-transition: display 2s ease-in;
        -o-transition: display 2s ease-in;
        transition: display 2s ease-in;
    }
    
    .rbTab2:checked ~ .ContentTab2
    {
        display: block;
        opacity: 1;


        -webkit-transition: display 2s ease-in;
        -moz-transition: display 2s ease-in;
        -o-transition: display 2s ease-in;
        transition: display 2s ease-in;
    }


    .rbTab3:checked ~ .ContentTab3
    {
        display: block;
        opacity: 1;
    }


    .rbTab4:checked ~ .ContentTab4
    {
        display: block;
        opacity: 1;
    }


    .rbTab5:checked ~ .ContentTab5
    {
        display: block;
        opacity: 1;
    }


    .rbTab6:checked ~ .ContentTab6
    {
        display: block;
        opacity: 1;
    }

Answer 1

当元素的位置不同时，您无法按照您想要的方式设置元素的不透明度动画。您所做的就像删除旧元素并添加新元素。

您可以将所有选项卡放入 div 容器中，设置容器的大小，将选项卡更改为

position: absolute;

，从类

display: none;

中删除

ContentTab

并将过渡添加到类

ContentTab

。

我修改了你的示例：https://codepen.io/untbu/pen/zYexoGv