切换CSS3褪色？

Question

是否有可能使用jQuery切换元素的不透明度（以便您可以通过-webkit-transition:opacity .5s linear;的方式淡入/淡出），然后将display更改为display:block（如果显示元素）或display:none（如果元素是隐？

例如：您点击一个<a>标签，该标签通过将不透明度设置为1并设置display:block来显示div。然后再次单击该标签<a>，并将其设置不透明度为0，然后设置显示器none。

我在此尝试如下：

.visible{ 
    opacity: 1; 
    -webkit-transition:opacity .5s linear; 
    display: block; 
} 

.close{ 
    display: none; 
    opacity:0; 
    width:20px; 
    height:20px; 
    background-color:red; 
    -webkit-transition:opacity .5s linear; 
} 

$(".toggle").click(function(){ 
if ($(".close").css("display") === "none") { 
    $(".close").addClass("visible").delay(500).promise().done(function() { 
     $(this).css("display", "block"); 
    }); 
}; 
if ($(".close").css("display") === "block") { 
    $(".close").removeClass("visible").delay(500).promise().done(function() { 
     $(this).css("display", "none"); 
    }); 
}; 
}); 

http://jsfiddle.net/charlescarver/zzP6g/

Answer 1

这种特殊page of the documentation是有帮助的：

过渡性质 - 为动画什么属性，例如，不透明度。

过渡期间 - 多长的过渡应该持续。

转换定时功能-用于转换 的定时函数（例如线性vs.易入与自定义立方贝塞尔函数）。

过渡 - 一种用于所有三个属性的简写。

所以，你可以调用一个特定的属性，如opacity，或者您也可以在类名称中使用all。我认为后者可能更有用，即使你只有一个物业可以申请。

基本上，你可以使用带有all转变特性class并切换类名。我发现有趣的事情之一是，你可以在class添加上实际上做多个版本（虽然删除类时不会发生完全相同的效果）。据我所知，还有一对opacity与width和height，它会比使用display: none更好。

以下演示如何在图层中使用-webkit-transition属性。这是一个简化版本，其次是更复杂的演示：

#block.transition让我们的我区分我的过渡性质：

<div id="block" class="transition"></div> 

基本性能，而不是动画：

#block { 
    margin: 25px auto; 
    background: red; 
} 

最初的“看不见”状态：

#block.transition { 
    opacity: 0; 
    width: 0; 
    height: 0; 
    padding: 0; 
    -webkit-transition: all 2s ease-in-out; 
} 

而动画s TEPS：

#block.transition.show { 
    opacity: .3; 
    width: 50px; 
    height: 50px; 
    background: orange; 
    -webkit-transition: all .5s ease-in-out; 
} 
#block.transition.show { 
    opacity: .4; 
    width: 150px; 
    height: 150px; 
    background: black; 
    -webkit-transition: all 1s ease-in-out; 
} 
#block.transition.show { 
    opacity: 1; 
    padding: 100px; 
    background: blue; 
    -webkit-transition: all 3s ease-in-out; 
}​ 

注意，所有我在这里做的是拨动.show类：

$(document).ready(function load(){ 
    var $block = $("#block"); 

    $('.toggle').click(function c(){ 
     $block.toggleClass('show'); 
    }); 
});​ 

Demo（Source）

---

标记

<p><button class="toggle">Toggle Blocks</button></p> 

<div id="block" class="transition"> 
    <div class="blocks transition"></div> 
    <div class="blocks transition"></div> 
    <div class="blocks transition"></div> 
</div> 

CSS

含#block：

#block { 
    margin: 25px auto; 
    background: #333; 
    -webkit-transition: opacity, display, width 1.5s ease-in-out; 
} 
#block.transition { 
    opacity: 0; 
    width: 0; 
    padding: 0; 
    border: 1px solid yellow; 
    -webkit-transition: all 1.9s ease-in-out; 
} 
#block.transition.show { 
    opacity: .3; 
    border-color: blue; 
    -webkit-transition: all .5s ease-in-out; 
} 
#block.transition.show { 
    opacity: 1; 
    width: 550px; 
    padding: 25px; 
    border-width: 15px; 
    -webkit-transition: all 3s ease-in-out; 
} 

组三个.blocks：

.blocks { 
    display: inline-block; 
    background-color: red; 
} 
.blocks.transition { 
    opacity: .1; 
    width: 0; 
    height: 0; 
    margin: 0; 
    -webkit-transition: all 1.7s ease-in-out; 
} 
.blocks.transition.show { 
    opacity: 1; 
    width: 150px; 
    height: 150px; 
    margin: 10px; 
    -webkit-transition: all 4.5s ease-in-out; 
}​ 

的jQuery

$(document).ready(function load(){ 
    var $block = $("#block"), 
     $blocks = $block.find(".blocks.transition"); 

    $('.toggle').click(function c(){ 
     $block.toggleClass('show'); 

     $blocks.delay(1500).toggleClass('show'); 
    }); 
});​ 

Demo（Source）

Answer 2

这似乎是一个重复：Transitions on the display: property
这个问题是非常非常相似，应该引起你了同样的结论。

最良好的祝愿，
Korvin

Answer 3

你为什么不添加一个事件监听器CSS3过渡结束事件，当事件触发时，你要么隐藏或显示元素。

$('.close').on('transitionend webkitAnimationEnd MozTransition OTransitionEnd MSTransitionEnd', function() { 
    $(this).show(); 
}); 

有了这个解决方案，您可以删除在点击事件中设置CSS属性显示阻止或无，并在transitionend事件处理程序处理。

如果您需要更详细的例子，我会很乐意提供。这显然只是让你走向正确方向的起点。

完整的示例：

$('.close').on('transitionend webkitAnimationEnd MozTransition OTransitionEnd MSTransitionEnd', function() { 
    if (!$(this).hasClass('visible')) { 
     $(this).css('display', 'none'); 
    } else { 
     $(this).css('display', 'block'); 
    } 
}); 

$(".toggle").click(function(){ 
    if ($(".close").is(':hidden')) { 
     $(this).css('display', 'block'); 
     $(".close").addClass("visible"); 
    } else {   
     $(".close").removeClass("visible"); 
    } 
});​