Question

我的导航栏上有这个按钮用于手机; button

并且我想在点击时给动画添加动画，就像css轻松一样，但是无法让它工作尝试将它放入@media，在相关的类中，并且没有一个工作。

.navbar .icon{
    display: none;
      position: absolute;
    -webkit-transition: width 2s;
}
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child), .dropdown .dropbtn {display: none;}
 .dropdown .dropbtn {display:none;}
  .navbar a.icon {
    float: right;
    display: inline-block; 
     -webkit-transition: width 2s;

  }
}

完整代码，但图像除外; https://jsfiddle.net/1cy90aqb/（调整窗口大小以显示按钮）提前致谢

Answer 1

更改元素的Textbox属性时，转换效果不佳。 您可以使用display属性向元素添加转换，而不是使用显示。

visibility

以下是您的代码的更新jsFiddle：https://jsfiddle.net/6mga5wzf/

更改过渡时间以查看效果。

希望有所帮助！

下拉动画不起作用

1 个答案: