CSS 过渡，具有相同属性的不同持续时间

Question

我知道您可以使用CSS过渡为不同的属性设置不同的持续时间。但是，是否可以为同一属性设置不同的持续时间？

示例：我希望一个框在悬停/鼠标退出时快速增大/缩小宽度到长度 A，但在按下按钮时使用不同的类缓慢增大/缩小宽度到长度 B。

下面是一个示例：

http://jsfiddle.net/VDyPG/7/

目前，盒子只有在悬停时才会快速增长，当鼠标退出时它会慢慢缩小。当然，这是意料之中的，因为.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;    
}

j查询：

$('.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>
​

Answer 1

我相信你可以通过使用这种技术的变体：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。

Answer 2

你的意思是这样的？

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