为什么这不会在块中消失而不是仅仅显示它？

Question

我正在尝试使用 css 过渡淡入一个块。在将显示设置为无屏蔽后，我有一个设置为不透明度 1 的类。它忽略了过渡。谁能告诉我为什么？谢谢。

jsfiddle：http://jsfiddle.net/qhvC2/2/

标记：

<div class="fade-alert">
</div>
<button class="my_butt" type="button">click me</button>

css:

.fade-alert {
    width: 200px;
    height: 100px;
    background: purple;
  opacity: 0;
  -webkit-transition: opacity 1.0s linear;
     -moz-transition: opacity 0.5s linear;
       -o-transition: opacity 0.5s linear;
          transition: opacity 1.0s linear;
    display: none;
}

.fade-alert.in
{
    opacity: 1;

}

javascript：

$(".my_butt").on( "click", function( e ){
$(".fade-alert").css("display", "block" );
$(".fade-alert").addClass("in"); });

Answer 1

最后，我使用 transitionEnd 事件从这个 SO 答案中使用 jquery 收听：Callback when CSS3 transition finishes

Answer 2

如果你还是要使用 jQuery，为什么不直接用 jQuery 淡入它呢

演示http://jsfiddle.net/kevinPHPkevin/qhvC2/3/

$('.my_butt').click(function() {
      $('.fade-alert').fadeIn('slow', function() {
        // Animation complete
      });
    });

更新

使用你的代码，你可以像这个 DEMO http://jsfiddle.net/kevinPHPkevin/qhvC2/5/ 那样做

CSS

.fade-alert {
    width: 200px;
    height: 100px;
    background: purple;
    opacity: 0;
    -webkit-transition: opacity 1.0s linear;
    -moz-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 1.0s linear;
}
.in {
    opacity: 1;
}

JS

$(".my_butt").on( "click", function( e ){
    $(".fade-alert").addClass("in"); });

理论上，使用最新选项，您只是添加不透明度 1，而不涉及 display 或 visibilty 本身

要消除身高问题，你可以做这个 DEMO http://jsfiddle.net/kevinPHPkevin/qhvC2/6/

JS

$(".my_butt").on("click", function (e) {
    $(".fade-alert").addClass("in");
});

CSS

.fade-alert {
    width: 200px;
    background: purple;
    opacity: 0;
    -webkit-transition: opacity 1.0s linear;
    -moz-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 1.0s linear;
    height: 0;
    overflow: hidden;
}
.fade-alert.in {
    opacity: 1;
    height: auto;
}

Answer 3

您可以使用 css 动画，而不是使用过渡 这是一个小提琴： http://jsfiddle.net/zCyeD/

因此您不必担心在单击之前或之后在项目上设置不透明度或可见性状态。您需要做的就是将它从显示无更改为显示块，并在切换到显示块时触发动画 - 发生这种情况是因为动画仅在 .fadeIn 应用到 .In 时触发。动画本身设置为持续 1 秒并调用关键帧。写入的关键帧立即使项目不透明度为 0%，并在动画结束时将其转换为 100% 不透明度。

jQuery:

$(".my_butt").on( "click", function( e ){
    $(".fade-alert").addClass("in");
});

CSS：

.fade-alert {
    width: 200px;
    height: 100px;
    background: purple;
    display: none;
}

.fade-alert.in
{
    display:block;
    -webkit-animation: fadeIn 1s; /* Safari 4+ */
    -moz-animation:    fadeIn 1s; /* Fx 5+ */
    -o-animation:      fadeIn 1s; /* Opera 12+ */
    animation:         fadeIn 1s; /* IE 10+ */
}

@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

我将您的显示块从 jQuery 设置移动到仅将其添加到 css 中，因为您已经添加了一个类 - 让它更整洁。

Answer 4

这是你可以用你的css替换它的代码，它工作正常

这里是小提琴链接http://jsfiddle.net/sarfarazdesigner/qhvC2/4/

.fade-alert {
    width: 200px;
    height: 100px;
    background: purple;
  opacity: 0;
  -webkit-transition: opacity 1.0s linear;
     -moz-transition: opacity 0.5s linear;
       -o-transition: opacity 0.5s linear;
          transition: opacity 1.0s linear;
    visibility:hidden;
}

.fade-alert.in
{
    opacity: 1;
    visibility:visible;
}