为什么这不是在块中褪色而是直接显示出来

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

这是代码你可以用你的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;
}

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这样的

要消除高度问题，您可以执行以下演示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 animation代替transition这里有一把小提琴:http://jsfiddle.net/zCyeD/

所以你不必担心在点击之前或之后在项目上设置不透明度或可见性状态。你所需要做的就是将它从display none更改为display block，当切换到display block时，你会触发动画——这是因为动画只有在. fadein得到。in应用于它时才会触发。动画本身被设置为持续15秒，并调用关键帧。写入的关键帧立即使项目不透明度为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

最后，我使用了transitionEnd事件来监听使用jquery从这个SO回答:回调时，CSS3过渡完成