切換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"); 
    } 
});​