如何为“可见性：隐藏”设置动画？

Posted 2023-02-21

【中文标题】如何为“可见性：隐藏”设置动画？

【英文标题】：How to animate "visibility: hidden"?

【发布时间】：2015-08-22 01:03:39

【问题描述】：

这是我的问题...你能帮帮我吗？

$(".button").hover(function()
  $('.class').css(opacity: 1.0, visibility: "hidden").animate(opacity: 0, 1200);
,function()
  $('.class').css(opacity: 0.0, visibility: "visible").animate(opacity: 1, 1200);
);

它仅在出现时动画。 :-(

【问题讨论】：

你为什么要用 jquery 做这个？这是一个简单的 CSS 过渡。使用 jquery 进行按钮悬停的零理由。

这个问题的答案很明显，我们应该期望看到很多低效的 jQuery 在野外。 @AmmarCSE 的答案是您在生产中想要的（尽管其他人可能会教您一些有关 jQuery 行为的知识）。

@holdenweb 不，在生产中，您需要基于 CSS 的解决方案，如我的回答所示。

啊，好电话，但公平地说，您当时没有发布您的答案。我应该说的是“在发明你自己的方法之前，让 jQuery 方法做你想做的事情相当困难”（这也提高了你的 jQuery 技能）。您建议基于 CSS 的声明性解决方案完全不涉及 javascript 是非常正确的。谢谢

我也忽略了它：OP 想要在悬停 .button 时淡入/淡出不同的元素 .class。

【参考方案1】：

CSS 中的可见性属性是布尔值，可以是开也可以是关。

为了让任何动画工作，无论是使用关键帧、过渡还是 jquery，属性值集的起点和终点都需要分解为一组步骤，更多的步骤导致更流畅的动画。

对于这样的简单效果，transition 是最好的，please see the fiddle here。仅使用 javascript 添加/删除触发转换的类

.hidden 
    opacity: 0;
    transition: opacity 0.5s ease-in;


.show-me 
    opacity: 1;

您设置转换属性，定义要转换的属性，然后设置长度、要使用的缓动函数（描述动画生效速率的变化）。您还需要定义动画属性的起点和终点，正如您在两个不透明度值中看到的那样。

作为记录 - 如果您的效果更复杂，则关键帧是合适的，例如希望一个属性在中途完全动画，然后在另一个动画完全动画时，或者用于振荡；并且 JQuery animate 提供了一种简单的方法来处理动画的结束，这有时也是必要的。

【讨论】：

我也忽略了它：OP 想要在悬停 .button 时淡入/淡出不同的元素 .class。

【参考方案2】：

试试这个方法：

$(".button").hover(function()
  $('.class').css("opacity", "1.0").animate(opacity: 0, 1200, function()
    $('.class').css("visibility", "hidden");
);
,function()
  $('.class').css(opacity: 0.0, visibility: "visible").animate(opacity: 1, 1200);
);

但是，这不是fadeIn 和fadeOut 的最佳选择。您可以使用带有 jQ​​uery 提供的名称的方法，或者更好地使用 CSS 转换，以防万一。

【参考方案3】：

$(".button").hover(function()
    $('.class').css(opacity: 1.0, visibility: "visible").animate( //start off from opacity 1 and visibile
        opacity: 0, //then animate opacity to 0
        1200, 
        function() //this will be run after the animation is completed
            $(this).css(
                visiblity:"hidden" //so it will be hidden only after the animation has completed
            );
        
    );
,function()
  $('.class').css(opacity: 0.0, visibility: "visible").animate(opacity: 1, 1200);
);

【参考方案4】：

使用fadeIn/fadeOut

$(".button").hover(function()
  $('.class').fadeOut(1200);
,function()
  $('.class').fadeIn(1200);
);

您可以传入duration，这应该可以实现您的目标

【讨论】：

用于显示：无与显示：块

【参考方案5】：

那是因为它在动画之前被移除了。您需要先为淡出设置动画，然后在动画完成后应用visibility: hidden。

有几种方法可以做到这一点：浏览器引发一个事件animationend（这是针对各种浏览器的预置 - 请参阅此处了解更多信息）或者您可以使用比 jQuery animate 更好的动画库（如 Green Sock TweenLite -- http://greensock.com/tweenlite) 来处理你的动画，这使得在动画结束时运行代码变得很简单。