Javascript 切换CSS3淡入淡出？

是否可以使用jQuery切换元素的不透明度（以便您可以通过

-webkit transition:opacity.5s linear；

）将其淡入/淡出，然后将

显示更改为
显示：块
（如果元素显示），或者将
显示：无
（如果元素隐藏）

例如：您单击一个
这似乎是重复的：

这个问题非常相似，应该会让你得出相同的结论

最美好的祝愿，

Korvin
为什么不在CSS3转换结束事件中添加一个事件侦听器，当事件触发时，您可以隐藏或显示元素

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

使用此解决方案，您可以在单击事件中删除css属性display设置为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");
    }
});​

这一点很有帮助：

过渡属性–应设置哪些属性的动画，例如不透明度

过渡持续时间–过渡应持续多长时间

转换计时功能–转换计时功能
（例如，线性vs.易用vs.自定义三次贝塞尔函数）

转换–所有三种属性的缩写

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

基本上，您可以将
类
与
所有
转换属性一起使用，并切换类名。我发现有趣的一件事是，实际上可以在
类
add上执行多个版本（不过，删除类时效果并不完全相同）。另外，将
不透明度
与
宽度
和
高度
相结合，就我所知，它将比使用
显示效果更好：无

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

#block.transition
让我来区分我的转换属性：

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

初始“不可见”状态：

以及动画步骤：

#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');
    });
});​

（）


标记

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

一组三个
。块
：

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');
    });
});​

（）
在
if
条件下使用
$是（':visible'）
或
$是（':hidden'）
。也许你可以检查一下这里的CSS3转换在哪里？他似乎在要求转换，因为他不知道这个选项，如果不是这样的话，我将删除。这不使用CSS3转换，这是我在问的。如果你想知道为什么，那是因为在iOS上，CSS3转换是硬件加速的，而jQ动画不是。让我修正一下，很抱歉。你能举个例子吗？这可能是因为我累了，但我很难想象这一点。当然，给我几分钟时间为您整理一个更详细的示例。它可能需要一些调整，因为我还没有完全测试它，但这个概念应该可以工作。
$(document).ready(function load(){
    var $block = $("#block");

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

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

#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 {
    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;
}​

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

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

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