CSS转换，不同的持续时间具有相同的属性？ [英] CSS transitions, different durations with the same property?
问题描述
我知道你可以使用CSS转换为不同的属性设置不同的持续时间。但是是否可以为相同的属性设置不同的持续时间？
I know you can set different durations for different properties with CSS transitions. But is it possible to set different durations for the same property?
示例：我想要一个宽度增长/缩小到 >长度A 快速 时，当按钮被按下时，宽度会增加/缩小到长度B 慢慢
Example: I want a box to grow/shrink in width to length A quickly when hovered/mouse exits, but grow/shrink in width to length B slowly when a button is pressed, using a different class.
以下是一个示例：
目前，盒子只有在悬停时才快速生长，当鼠标退出时它会缓慢收缩。当然这是预期的，因为 .box 类应用了缓慢的持续时间速度，但是有办法解决这个问题吗？我已经制定了一个黑客的方式做它与 setTimeout 和一个额外的快类，但如果有一个更优雅的方式，这将是可爱的。
At the moment, the box only grows quickly when hovered, it shrinks back slowly when the mouse exits. Of course this is expected, as the .box class has the slow duration speed applied, but is there a way around this? I have worked out a hacky way of doing it with setTimeout and an extra "fast" class, but it would be lovely if there was a more elegant way.
注意：我知道这可以很容易地用jQuery做。我真的希望它与CSS工作，因为我面对的这个孤立的例子外面的实际问题是与3D变换。保持简单的例子。 ：）
Note: I'm aware this can be done easily with jQuery. I'm really looking for it to work with CSS however, as the actual problem I'm facing outside of this isolated example is with 3D transforms. Kept it simple for the example. :)
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： b
$('.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>
推荐答案
我相信你可以使用此技术的变体： http：// css-tricks。 com / different-transitions-for-hover-on-hover-off / 。我现在在我的iPad上，所以不是那些出了一个例子，但它的要点是你在悬停伪选择器上设置不同的过渡。
I believe you can by using a variant of this technique: http://css-tricks.com/different-transitions-for-hover-on-hover-off/ . I'm on my iPad right now, so won't those out an example, but the gist of it is that you set a different transition on the hover pseudo selector.
如果你想使用jquery，那么你可以绑定到transitioned事件，以确定上一个transition是什么时候完成，值得注意的是命名不一致 -
If you want to use jquery, then you can bind to the transitioned event to find out when the previous transition as finished, it's worth noting that the naming isn't consistent -
$("div").bind("webkitTransitionEnd oTransitionEnd msTransitionEnd transitionEnd transitionend", function(){
//code
});
看起来Firefox使用transitionend，而不是正确的transitionEnd。
As it seems that Firefox uses transitionend, rather than the correct transitionEnd.
这篇关于CSS转换，不同的持续时间具有相同的属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
