CSS转换，具有相同属性的不同持续时间？

我知道你可以通过CSS转换为不同的属性设置不同的持续时间。但是有可能为相同的属性设置不同的持续时间吗？CSS转换，具有相同属性的不同持续时间？

例如：我想一个盒子生长/当按下一个按钮在宽度收缩到长度A 快速盘旋时/小鼠退出，但生长/收缩在宽度长度B 慢慢，使用不同的课程。

下面是一个例子：

目前，盒子只生长迅速盘旋时，退缩慢慢鼠标退出时。当然这是预料之中的，因为.box职业的持续时间速度很慢，但是有没有办法解决这个问题？我已经用setTimeout和一个额外的“快速”课程制定了一个很好的方法，但如果有一个更优雅的方式，这将是可爱的。

注意：我知道这可以用jQuery轻松完成。然而，我真的希望它能够与CSS一起工作，因为我在这个孤立的例子之外面临的实际问题是3D转换。为例子保持简单。 :)

CSS：

.box { 
    background: red; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
    -webkit-transition: width 2s; 
} 

.lengthA 
{ 
    width: 300px; 
    -webkit-transition-duration: 0.2s; /* Can this be used when class removed? */ 
} 

.lengthB { 
    width: 500px;  
}

的jQuery：

$('.box').on('mouseenter', function() { 

    $(this).addClass('lengthA');    

}) 

$('.box').on('mouseleave', function() { 

    $(this).removeClass('lengthA');    

})  

$('.makeBig').on('click', function() { 

    $('.box').toggleClass('lengthB');    

})

HTML：

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<button class="makeBig">Grow!</button>

来源

2012-06-05 AlexKempton

我的解决方案提出了基于使用“宽”和“最小宽度”。它的工作原理。但是这需要回到一个类的转换集。它有帮助吗？ –

嗯，这当然是有创意的，但不幸的是它并没有真正的帮助，因为实际上我的问题是3D变换，我只是用宽度作为一个简单的例子，不想太复杂的问题。不管怎么说，还是要谢谢你！ – AlexKempton

我相信你可以通过使用VA这种技术的饶舌：http://css-tricks.com/different-transitions-for-hover-on-hover-off/。我现在在iPad上，所以不会有这样的例子，但其要点在于您为悬停伪选择器设置了不同的转换。

如果你想使用jQuery的，那么你就可以绑定到转变事件，找出当为完成以前的过渡，这是值得注意的命名并不一致 -

你要使用例如：

$("div").bind("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionEnd transitionend", function(){ 
  //code 
});

由于Firefox似乎使用了transitionend而不是正确的transitionEnd。

来源

2012-06-05 21:08:16

嗯，不知道这是否会起作用，因为当悬停状态不活跃时，它总是回到原始的过渡期。此外，我必须在实际项目中添加类时使用jQuery事件处理程序，这是一个孤立的示例。 – AlexKempton

如果您已经使用jquery，请添加类。更改转换属性，删除类，放回转换。您可以绑定到transitionEnd事件。 –

啊，transitionEnd事件，这是智能解决方案！没有意识到有这样的事情。谢谢！我有同样的想法，但使用'setTimeout'，这对我来说太难看了。 – AlexKempton

你的意思是这样？：

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<button class="makeBig">Grow!</button> 

<style type="text/css"> 
    .box { 
     width: 100px; 
     height: 100px; 
     margin: 10px; 
     background: red; 
     -webkit-transition: width 250ms ease; 
    } 
    .box:hover { 
     width: 500px; 
    } 
    .box.slow { 
     width: 500px; 
     -webkit-transition-duration: 2s; 
    } 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(".makeBig").on("click", function() { 
     $('.box').addClass("slow"); 
    }) 
</script>

来源

2012-06-08 08:15:40

CSS转换，具有相同属性的不同持续时间？

回答

相关问题