Question

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

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

以下是一个例子：

目前，盒子只在徘徊时快速生长，当鼠标退出时它会慢慢收缩。当然这是预期的，因为.box类的持续时间速度很慢，但有没有办法解决这个问题呢？我用setTimeout和一个额外的“快速”课程来制定一个hacky方式，但如果有更优雅的方式，它会很可爱。

注意：我知道这可以通过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>

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>

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

2 个答案: