javascript - 切换 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很有帮助:

transition-property – What property should animate, e.g., opacity.

transition-duration – How long the transition should last.

transition-timing-function – The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).

transition – A shorthand for all three properties.

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

基本上，您可以使用具有所有 转换属性的class 并切换类名。我发现有趣的一件事是，您实际上可以在 class add 上执行多个版本(尽管删除类时会出现不完全相同的效果)。此外，将 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; 
}

动画步骤:

#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 )