CSS 页面上多个元素的过渡

Question

在我的页面上我有 2 个 div：

<div class="mycards fight">
      <div class="card"><span class="name"></span><div id="att1"><span></span></div><div id="def1"><span></span></div></div>
</div>

    <div class="mycards fight2">
               <div class="card"><span class="name"></span><div id="att2"><span></span></div><div id="def2"><span></span></div></div>
            </div>

我正在通过 jquery 注入圆顶文本，例如：

$('#att1').html(sometext); $('#att2').html(sometext);等

在 CSS 中，我为这些元素设置了过渡：

#att1, #att2, #def1, #def2 {
    transition: all 1s ease; 
}

问题是，转换仅适用于第二个 DIV，其中存在 #att2 和 #def2，但它在我的第一个 DIV 中忽略了它。

我也尝试通过 jquery 来做到这一点：

$("#att1").addClass('trans');$("#def1").addClass('trans');
$("#att2").addClass('trans');$("#def2").addClass('trans');

在我的脚本中需要时，然后在 CSS 中我定义了

   .trans {
        transition: all 1s ease; 
    }

但同样，它现在仅适用于第一个 DIV。

出于某种原因，它不能对两个元素产生相同的效果。不知道哪里出了问题。

预期转换的示例：

function bonus(val,val1,val2) {
            $.ajax
            ({url: 'bonus.php',
                data: {"var1": val,"var2": val1,"var3": val2},
                type: 'get',
                dataType: 'json',
                success: function(datax) { 
                  if (val2===1) {
                            if (val===1) {$("#att1").addClass('size-50');}
                            if (val===2) {$("#def1").addClass('size-50');}
                            if (val===3) {$("#att1").addClass('size-50');$("#def1").addClass('size-50');}

                            window.setTimeout(function(){

                                if (val===1) {$("#att1").removeClass('size-50'); $("#att1").addClass('size-30');}
                                if (val===2) { $("#def1").removeClass('size-50'); $("#def1").addClass('size-30');}
                                if (val===3) {$("#att1").removeClass('size-50'); $("#att1").addClass('size-30');
                                    $("#def1").removeClass('size-50'); $("#def1").addClass('size-30');}
                                                                   },500);
                        }
                        else {
                            if (val===1) {$("#att2").addClass('size-50')}
                            if (val===2) {$("#def2").addClass('size-50');}
                            if (val===3) {$("#att2").addClass('size-50');$("#def2").addClass('size-50');}
 
                            window.setTimeout(function(){

                                if (val===1) {$("#att2").removeClass('size-50'); $("#att2").addClass('size-30');}
                                if (val===2) { $("#def2").removeClass('size-50'); $("#def2").addClass('size-30');}
                                if (val===3) {$("#att2").removeClass('size-50'); $("#att2").addClass('size-30');
                                    $("#def2").removeClass('size-50'); $("#def2").addClass('size-30');}

                            },500);

                        }

                        window.setTimeout(function(){runAll();},1000);
                
            }});
}

Answer 1

该死，我认为问题出在我当时使用的条件上，例如val===1 错误地比较了值。当我将它替换为 == 现在它适用于这两种情况。

有时核心问题是由其他原因引起的...

CSS 页面上多个元素的过渡

CSS transition for multiple elements on the page

html

jquery

css

css-transitions