CSS平滑移動動畫無法正常工作

Question

css動畫代碼無法正常工作。當#tools_button被選中時，我希望#tools_hidden變得可見並且從頂部移動：0％到頂部：6％順利。 下面是代碼：

#tools_hidden { 
 
    position: fixed; 
 
    left: 10%; 
 
    top: 0; 
 
    display: none; 
 
    -webkit-transition: width 2s; 
 
    /* For Safari 3.1 to 6.0 */ 
 
    transition: top 0.5s; 
 
} 
 

 
#tools_button:checked~#tools_hidden { 
 
    position: fixed; 
 
    left: 10%; 
 
    top: 6%; 
 
    display: block; 
 
}

<div id="tools"> 
 
    <span> 
 
\t \t \t \t <input type="checkbox" id="tools_button"> 
 
\t \t \t \t \t <label for="tools_button"> 
 
\t \t \t \t \t \t <img src="img/tools.png" id="tools_icon" alt=""> 
 
\t \t \t \t \t \t \t <span id="tools_label"> 
 
\t \t \t \t \t \t \t Tools 
 
\t \t \t \t \t \t </span> 
 
    </label> 
 
    <span id="tools_hidden"> 
 
\t \t \t \t \t this is hidden 
 
\t \t \t \t </span> 
 
    </span> 
 
</div>

腳本被嚴格限制爲我的項目。所以，請不要考慮添加腳本。

Answer 1

你可以用動畫的opacity代替display得到你想要的效果：

#tools_hidden { 
 
    position: fixed; 
 
    left: 10%; 
 
    top: 0; 
 
    opacity: 0; 
 
    -webkit-transition: width 2s; 
 
    /* For Safari 3.1 to 6.0 */ 
 
    transition: top 0.5s; 
 
} 
 

 
#tools_button:checked~#tools_hidden { 
 
    position: fixed; 
 
    left: 10%; 
 
    top: 6%; 
 
    opacity: 1; 
 
}

<div id="tools"> 
 
    <span> 
 
      <input type="checkbox" id="tools_button"> 
 
       <label for="tools_button"> 
 
        <img src="img/tools.png" id="tools_icon" alt=""> 
 
         <span id="tools_label"> 
 
         Tools 
 
        </span> 
 
    </label> 
 
    <span id="tools_hidden"> 
 
       this is hidden 
 
      </span> 
 
    </span> 
 
</div>

Answer 2

也許這是無法實現的顯示屬性來實現。 因此，我已將div的第一個位置更改爲-6％，並刪除了display：none和display：block。 這是新的CSS代碼：

#tools 
     { 
     height:6vh; 
     background-color:#747474; 
     font-size:5em; 
     } 
#tools_icon 
     { 
     height:90%; 
     width:5vh; 
     } 
#tools_hidden 
     { 
       height:6vh; 
     background-color:#747474; 
     font-size:1em; 
     position:fixed; 
     left:10%; 
     top:-6%; 
     -webkit-transition: top 2s; /* For Safari 3.1 to 6.0 */ 
     transition: top 0.5s; 
     } 
#tools_button:checked ~ #tools_hidden{ 
     position:fixed; 
     left:10%; 
     top:7%; 
     } 

的HTML代碼仍然是舊的。