Question

我有一个div标签和一个按钮。我想要的是当我按下按钮然后我希望使用css3过渡动画div标签。当我按下按钮时，我当前的代码旋转按钮因为我正在将变换应用于按钮。如何使我的下列代码正常工作？

我的代码是here

<button>Button</button>
<div class="rotate"></div>

CSS样式

.rotate {
width: 100px;
height: 100px;
background: green;
-webkit-transition: -webkit-transform 0.5s ease;
}

button:active {
-webkit-transform: rotate(90deg);
}

Answer 1

您可以将+用于选择相邻的兄弟姐妹

button:active + div.rotate {
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

FIDDLE

有关相邻兄弟选择器的更多详细信息，请访问here

Answer 2

尝试此操作使用 + ，如果它是相邻的兄弟

.rotate  {
width: 100px;
height: 100px;
background: green;
-webkit-transition: -webkit-transform 0.5s ease;
}
  div
   {
webkit-transition: -webkit-transform 0.5s ease;  
   }
 button:active + div {
-webkit-transform: rotate(90deg);
   }

Answer 3

只需将button:active更改为button:active + .rotate或button:active ~ .rotate

即可

如果它是相邻的兄弟，请使用+;如果它位于DOM的下方，则使用~。

Answer 4

实现这一目标的更好方法是使用更永久的伪类来触发更改，例如焦点一。

而且，如果你想让改变只用CSS继续存在，那就有一个黑客（甚至有名称;但我现在还记不起来了），这就是回归转型极度延迟

.rotate {
    width: 100px;
    height: 100px;
    background: green;
    -webkit-transition: -webkit-transform 9999s ease 9999s;
}

button:focus + div.rotate {
        transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -webkit-transition: -webkit-transform 0.5s ease;

}

fiddle

在css3过渡中按下按钮时动画div标签

4 个答案: