页面上多个元素的 CSS 过渡答案

【问题标题】：CSS transition for multiple elements on the page页面上多个元素的 CSS 过渡
【发布时间】：2022-01-14 23:14:15
【问题描述】：

在我的页面上我有 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);
                
            }});
}

【问题讨论】：

你能发布一个工作示例吗？ minimal reproducible example
您要更改哪些属性？我看不到任何会过渡的东西。
@Sfili_81 这是一个复杂的游戏，我贴了一个小例子，当我通过ajax更新att1等的值时，通过html更改它应该有过渡效果。它有，但仅限于一个 div。
@A.Hawort 我在我的问题中提到：我只是在更改 : $('#att1').html(sometext); 中的值$('#att2').html(sometext);并且文本大小正在改变（我现在添加了那部分代码）
我认为你可以创建一个小sn-p来重现错误，

标签： html jquery css css-transitions

【解决方案1】：

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

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

【讨论】：