在不同的CSS块中执行多个单独的转换

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);
}

我简化了很多代码。我的问题基本上是。当一个类被添加到我的BTNdiv，他们弹出，这工作得很好。但现在我的问题是，当我已经把div变换出来的时候，它不想在悬停时也变换它。我的问题是，你能在两个不同的CSS块中执行两个单独的变换吗?这有可能吗?

Answer 1

堆叠动画是很可能的-它没有工作，因为在CSS中使用btn1而不是#btn1。

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

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

基本修改如下:

HTML:

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

CSS:

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

这里是小提琴，这里是代码示例:

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>