Javascript 如何将动画添加到元素'；当类使用jQuery更改时，css属性是什么？

问题是：

我有一个HTML元素，它有一个类

hidden

，它设置css属性

display:none。当我用JS删除类时，元素立即可见（原始的
显示值被恢复）。我希望能够设置“显示”动画的持续时间，就像我可以使用：
$（'.hidden'）.show（1000）
或
$（'.hidden'）.fadeIn（1500）
。我尝试使用
.animate（）
链接，但没有成功

局限性

它不能干扰元素的内联CSS（尤其是它不能设置
显示：块
）
它的行为应该类似于jQueryUI removeClass：
问题是：

如何在我进行更改时设置动画（持续时间>0）
是否删除（更改）HTML元素的类

守则：

CSS:

.hidden{
display: none;
}

HTML

<div class="hidden"> Lorem ipsum </div>

这将显示它使用动画，一旦动画完成，我们删除类

这将显示它使用动画，一旦动画完成，我们删除类
 你删除了需要淡化的类，这是错误的

你可以试试这个

HTML

你删除了需要淡化的类，这是错误的

你可以试试这个

HTML

为什么不能使用
$（'.hidden'）.fadeIn（1500）

为什么不能使用
$（'.hidden'）.fadeIn（1500）

如果您需要在现代浏览器中运行此动画，请使用css转换

.hidden{
    display: none;
}
.hidden.fadeIn{
    display: block;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hidden.fadeIn.do{
    opacity:1;
    visibility:visible;
}

在JS中，可以如下设置类：

$('.hidden').addClass('fadeIn');
setTimeout(function(){$('.hidden.fadeIn').addClass('do');},10);

不幸的是，除非您必须使用
setTimeout
。如果不这样做，两个类的更改将同时被解释，并且不会发生动画

编辑

如果修改
hidden
类的规则，您可能可以使用更少的代码：

.hidden{
    display: none;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hidden.fadeIn{
    display: block;
    opacity:1;
    visibility:visible;
}

现在，您只有1个类可以使用JS添加：

function fade(){
    $('.hidden').addClass('fadeIn');
}
setTimeout(fade,10);

如果您需要在现代浏览器中运行此动画，请使用css转换

.hidden{
    display: none;
}
.hidden.fadeIn{
    display: block;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hidden.fadeIn.do{
    opacity:1;
    visibility:visible;
}

在JS中，可以如下设置类：

$('.hidden').addClass('fadeIn');
setTimeout(function(){$('.hidden.fadeIn').addClass('do');},10);

不幸的是，除非您必须使用
setTimeout
。如果不这样做，两个类的更改将同时被解释，并且不会发生动画

编辑

如果修改
hidden
类的规则，您可能可以使用更少的代码：

.hidden{
    display: none;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hidden.fadeIn{
    display: block;
    opacity:1;
    visibility:visible;
}

现在，您只有1个类可以使用JS添加：

function fade(){
    $('.hidden').addClass('fadeIn');
}
setTimeout(fade,10);


使用HTML和CSS，您可以使用以下JS：

$('.hidden')
    .css({ // Change your CSS directly to
          'display':'inline', // the display you want
          'opacity':0 // from opacity 0
    })
    .animate({ // Will change your CSS over time
           opacity:1 // to opacity 1
           },
           2000,  // in 2 secs
           function(){
               $(this).removeClass('hidden'); // will remove your class (only if you want to use it once
               alert($(this).css('display')); // will alert "inline", your current display on that element
           }
    );


使用HTML和CSS，您可以使用以下JS：

$('.hidden')
    .css({ // Change your CSS directly to
          'display':'inline', // the display you want
          'opacity':0 // from opacity 0
    })
    .animate({ // Will change your CSS over time
           opacity:1 // to opacity 1
           },
           2000,  // in 2 secs
           function(){
               $(this).removeClass('hidden'); // will remove your class (only if you want to use it once
               alert($(this).css('display')); // will alert "inline", your current display on that element
           }
    );

我不想使用内联CSS样式——我不能，我觉得它们很难看。我搜索的解决方案应该是纯JS/jQuery。我不想使用内联CSS样式——我不能，我觉得它们很难看。我搜索的解决方案应该是纯JS/jQuery。我试过了，不幸的是设置了丑陋的内联
style=“display:block”
，这是我不允许的。我试过了，不幸的是设置了丑陋的内联
style=“display:block”
这是我不允许的。因为它将内联样式设置为
display:block
，这在我的设置中是错误的。我将更新问题，使其更具体。因为它将内联样式设置为
display:block
，这在我的设置中是错误的。我会更新问题，让它更具体。谢谢你的详细回答。我稍后再查。CSS转换看起来很有希望。感谢您的详细回答。我稍后再查。CSS转换看起来很有希望。