3

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

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

这是一个例子：

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

目前，盒子只有在悬停时快速增长，当鼠标退出时它会慢慢收缩。当然这是意料之中的，因为该.box课程应用了缓慢的持续时间，但是有没有办法解决这个问题？我已经制定了一种 hacky 方法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');            

})

​<strong>HTML：

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

2 回答 2

2

我相信您可以使用这种技术的变体：http: //css-tricks.com/different-transitions-for-hover-on-hover-off/。我现在在我的 iPad 上，所以这些不是一个例子，但它的要点是你在悬停伪选择器上设置了不同的转换。

如果你想使用jquery，那么你可以绑定到transitioned事件来找出之前的transition是什么时候完成的，值得注意的是命名并不一致——

你会想要使用类似的东西：

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

似乎 Firefox 使用的是 transitionend，而不是正确的 transitionEnd。

于 2012-06-05T21:08:16.330 回答
0

你的意思是这样吗？：

<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-08T08:15:40.907 回答