使用伪类：target时，如何反转动画？

Question

我正在制作一个下拉菜单，当我点击图像时，它会缩放并旋转。 这一切都运作良好，但当我再次点击它时，我希望它回到它的正常状态。

#arrow {
  z-index: 2;
  position: absolute;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#arrow:target {
  transform: scale(1.2) rotate(45deg);
  -ms-transform: scale(1.2) rotate(45deg); 
  -webkit-transform: scale(1.2) rotate(45deg);
  -moz-transform: scale(1.2) rotate(45deg);
  -o-transform: scale(1.2) rotate(45deg);
  margin-top: 1em;
}

这是jsfiddle：Click me =)

Answer 1

“反转”我知道的:target应用程序的唯一方法是更改​​链接中的片段（或以其他方式添加新的class或其他内容。）

除了一些<input>元素之外，如果没有轻量级的JavaScript，就无法进行状态更改。

UPDATED DEMO

修改

Here's an updated demo使用<input type="checkbox">与:checked代替:target而不涉及JavaScript。 YMMV取决于所需的浏览器支持。

#arrow {
    position: absolute;
    left: -9999px; /* hide the checkbox off-screen */
    z-index: 2;
}

#arrow:before {
    width: 96px;
    height: 104px;
    position: absolute;
    top: 2px;
    left: 9999px; /* undo the checkbox offset */
    display: block;
    content: ' ';
    background: url(http://s23.postimg.org/s6m0zb4ev/arrow.png) no-repeat;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#arrow:checked:before {
    -moz-transform: scale(1.2) rotate(45deg); 
    -webkit-transform: scale(1.2) rotate(45deg); 
    transform: scale(1.2) rotate(45deg);  
}

Answer 2

当图像是目标时，:target选择器只是将样式应用于图像，单击锚点时，因为图像ID是锚点的href。

因此，再次单击锚点，它仍然是相同的目标，因此仍然会应用样式，而不是切换它们。这是预期的确切行为。

你能不能只用JS来换算一个类？

Answer 3

您可以在箭头下设置另一个锚点，点击箭头后，交换z-index，以便下一次点击转到此点。

然后活动将是“noarrow”，而不是箭头。

body{
background-color: black;
}

.logo{
background:transparent url('http://s23.postimg.org/7xyndl53r/trans_bg.png') repeat center top;
height: 200px;
}

.arrow{
position: relative;
z-index:2;}

.text{
position: absolute;
z-index: 1;
margin-top: 1.6em !important;
margin-left: 3em;}



#arrow img {
z-index: 2;
position: absolute;
-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#arrow:target img, #arrow:focus img {
transform: scale(1.2) rotate(45deg);
-ms-transform: scale(1.2) rotate(45deg); 
-webkit-transform: scale(1.2) rotate(45deg); 
margin-top: 1em;
}

#arrow:target, #arrow:target div , #arrow:target img {
 z-index: -99;    
}


#text{
z-index: 1;
position: absolute;
}

.noarrow {
    width: 200px;    
    height: 200px;
    z-index: 1;
}

demo

Answer 4

我使用了另一个锚点来关闭div。 例如。 <a href="#open">Open</a>和<a href="#close">Close</a> 这将反转动画。

演示https://jsfiddle.net/z6nya3c4/2/