Question

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

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

我的尝试如下：

none

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

Answer 1

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

祝你好运，
Korvin

Answer 2

为什么不向CSS3转换结束事件添加事件监听器，当事件触发时，您要么隐藏也要显示该元素。

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

使用此解决方案，您可以在click事件中删除css属性显示为block或none的设置，并在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");
    }
});

Answer 3

这个page of the documentation特别有用：

transition-property - 应该制作什么属性，例如不透明度。

转换持续时间 - 转换应持续多长时间。

transition-timing-function - 转换的计时功能   （例如，线性与易用性相比，自定义立方贝塞尔函数）。

过渡 - 所有三个属性的简写。

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

基本上，您可以使用class all转换属性并切换类名称。我发现有趣的事情之一就是你可以在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; 
}

动画步骤：

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

切换CSS3淡出？

3 个答案: