Question

我有类似的东西

<div id="btns">
    <div id="btn1"></div>
    <div id="btn2"></div>
    <div id="btn3"></div>
</div>

CSS

#btns >div{

  //makes each of my btns pop out at different timings
   transition: all 0.5s ease;
}
#btn1{

  transition-delay:  .6s;
}
.btnsOut #btn1{
   //makes btn pop out
   //this works
  transform: translate(-50px, 40px);

}
#btns.btnsOut >div:hover {
     //hover effect for poped out btn
     // this doesnt work, other css rules in this block works, but not transform
      transform: rotate(-10deg);
}

好的，所以我简化了我的代码。我的问题基本上是。当一个类被添加到我的btn divs时，它们弹出，这很好用。但现在我的问题是，当我已经改变了div时，它会弹出，它也不想在悬停上转换它。所以我的问题是，你能在两个不同的css块中执行两个单独的转换吗？这有可能吗？

Answer 1

堆叠动画很有可能 - 由于在CSS中使用btn1而不是#btn1，它无效。

要使第二个旋转效果不受第一个平移效果的影响，最简单的方法是添加一个嵌套div：外部的一个用于平移，另一个用于旋转。

要使旋转中心（或多或少）为文本的中心，必须使用display: inline-block减少内部div的宽度。

基本修改是：

HTML：

<div id="btn1p">
    <div id="btn1">B1</div>
</div>

CSS：

.btnsOut #btn1p {
    transform: translate(50px, 0);
}
#btns > div > div:hover {
    transform: rotate(-10deg);
}

这是fiddle，这是代码示例：

jQuery(function ($) {
    setTimeout(function () {
        console.log("ani");
        $('#btns').addClass('btnsOut');
    }, 1000)
})

#btns div {
    transition: all 0.5s ease;
}
#btns > div > div {
    display: inline-block;
}
#btn1 {
    transition-delay: .6s;
}
.btnsOut #btn1p {
    transform: translate(50px, 0);
}
#btns > div > div:hover {
    transform: rotate(-10deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btns">
    <div id="btn1p">
        <div id="btn1">B1</div>
    </div>
    <div>
        <div id="btn2">B2</div>
    </div>
    <div>
        <div id="btn3">B3</div>
    </div>
</div>

在不同的css块

1 个答案: