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>
				<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 1

您可以使用动画opacity代替display来获得所需的效果：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

也许它不可能与display属性有关。所以，我已将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代码仍然是旧代码。

CSS平滑移动动画不起作用

2 个答案: