单击带有旋转图像的图像时打开列表

Question

具有以下结构：单击图像时需要在图像上方向上打开列表，并将图像旋转到180度，并具有一些线性过渡效果，

<div class="wrapper">
     <span><Image></span>
    <ul class="list">
    <li class="">
     <a href="">item 1</a>
    </li>
    <li class="">
     <a href="">item 2</a>
    </li>
    <li class="">
     <a href="">item 3</a>
    </li>
    <li class="">
     <a href="">item 4</a>
    </li>
    </ul>
    </div>

尝试了同级的max-height，但没有达到我想要的效果

list{
 max-height: 0;
 overflow:hidden;
}
a:focus+list{
 max-height:10rem;
}

Answer 1

您在这里：

.list {
  max-height: 0;
  overflow: hidden;
}

span {outline:0}

span img {transition:.5s}

span:focus img {transform: rotate(90deg)}

span:focus+.list {
  max-height: 10rem;
}

<div class="wrapper">
  <span tabindex="1">
    <img src="https://picsum.photos/100">
  </span>
  <ul class="list">
    <li class="">
      <a href="">item 1</a>
    </li>
    <li class="">
      <a href="">item 2</a>
    </li>
    <li class="">
      <a href="">item 3</a>
    </li>
    <li class="">
      <a href="">item 4</a>
    </li>
  </ul>
</div>