切换CSS3淡出？ [英] Toggle CSS3 fade?

问题描述

是否可以使用jQuery切换元素的不透明度（以便您可以通过 -webkit-transition：opacity .5s linear; ），然后将显示更改为 display：block c> display：none 如果元素已隐藏？

Is it possible to use jQuery to toggle the opacity of an element (so that you can fade it in/out by the means of -webkit-transition:opacity .5s linear;) and then change the display to display:block if the element is shown, or display:none if the element is hidden?

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

For example: You click on an <a> tag, which shows a div by means of setting it's opacity to 1 and setting display:block. Then you click the <a> tag again, and it sets the opacity to 0 and then sets the display to 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/

推荐答案

这个特殊的文档页面有帮助：

transition-property - 什么属性应该生成动画（例如不透明度）。

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

- 过渡时间应该持续多长时间。

transition-duration – How long the transition should last.

transition-timing-function （例如，线性vs易于与自定义立方贝塞尔函数）。

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

transition - 所有三个属性的缩写。 / p>

transition – A shorthand for all three properties.

因此，您可以调用特定的属性，例如 opacity all 。我认为后者可能更有用，即使你只有一个属性可以申请。

So you can call a specific property, like opacity, or you can use all in a class name. I think the latter is possibly more useful, even if you have only one property to apply.

基本上，你可以使用类与 all 转换属性并切换类名称。我发现有趣的事情之一是，你可以在类添加（实际上不是完全相同的效果发生时删除类，但是）。另外， opacity 与 width 和 height 工作比使用 display：none 更好。

Basically, you can use a class with the all transition properties and toggle the class name. One of the things I found interesting was that you can actually do multiple versions on the class add (not quite the same effect occurs when removing the class, though). Also, couple opacity with width and height and it will work better than using display: none, as far as I could tell.

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

The below demonstrates how you could use the -webkit-transition property in layers. This is a simplified version, followed by a more sophisticated demonstration:

＃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 class：

Note, all I'm doing here is toggling the .show class:

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

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

演示（来源）

标记 p>

Markup

<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 ：：



Group of three .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 b

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

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

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

演示（来源）

这篇关于切换CSS3淡出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！