Question

我有以下按钮：

HTML：

<button id='foo' style='display: none; opacity: 0'>Foo</button>

CSS：

    #foo {
      transition: opacity .5s ease-in-out;
      -moz-transition: opacity .5s ease-in-out;
      -webkit-transition: opacity .5s ease-in-out;
    }

JS：

  $('#foo').css('display', '');
  $('#foo').css('opacity', '');

它在某种意义上起作用，按钮确实出现了，但没有动画。所以我不确定这里的问题是什么。有没有人有任何想法？

此外，我不想要提及可见度的建议，因为这不是重点。谢谢！

Answer 1

您应该将display属性设置与设置动画中涉及的属性分开。如果您将它们设置为一轮，动画将无法运行（问题出在display: none）。一种方法是进行setTimeout。

另外，我的建议是永远不要改变JS的样式属性，总是操纵类以便更好地分离。这样的事情会做：

＆＃13;

var $foo = $('#foo').addClass('display');
 
setTimeout(function () {
  $foo.addClass('show');
});

＆＃13;

#foo {
  transition: opacity 1s ease-in-out;
  opacity: 0;
  display: none;
}

#foo.display {
  display: inline-block;
}

#foo.show {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id='foo'>Foo</button>

＆＃13;

Answer 2

阻止您的示例停止工作的主要问题是因为您正在更改元素的display状态。删除display设置，您的代码可以正常运行：https://jsfiddle.net/RoryMcCrossan/pcp2x53m/

话虽如此，但有几个问题。首先，不要将属性设置为''。应该设置默认值。其次，使用类是更好的做法。

如果您要求默认情况下将元素设置为display: none，那么在设置其不透明度并允许转换开始之前，您需要等待元素设置为display: block。

这是一个完整的例子：

$('#foo').show(0, function() {
    $(this).addClass('fade-in');
});

#foo {
  display: none;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}
#foo.fade-in {
  opacity: 1;
}

<button id="foo">Foo</button>

Example fiddle

使用CSS动画更改显示和不透明度

2 个答案: