Question

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

标记：

<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

如果你打算使用jQuery，为什么不用jQuery淡化它

DEMO 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 2

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

最后，我使用transitionEnd事件来听取来自这个SO答案的jquery：Callback when CSS3 transition finishes

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

4 个答案: