0

我正在尝试使用 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"); });
4

4 回答 4

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;
}
于 2013-05-25T17:18:28.560 回答
2

如果你无论如何都要使用 jQuery，为什么不直接用 jQuery 淡入它呢？

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

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

更新

使用您的代码，您可以像这样的演示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;
}
于 2013-05-25T17:15:09.827 回答
1

而不是使用过渡，你可以使用 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 中，因为您已经添加了一个类 - 让它更整洁一些。

于 2013-05-25T18:21:34.097 回答
0

最后，我使用了 transitionEnd 事件从这个 SO 答案中使用 jquery 来收听：CSS3 过渡完成时的回调

于 2013-05-26T13:10:42.977 回答