下拉动画不起作用答案

【问题标题】：Dropdown animation not working下拉动画不起作用
【发布时间】：2018-04-23 19:38:07
【问题描述】：

我的手机导航栏上有这个按钮； button

并且我想在点击时给 drop 一个动画，就像 css ease 一样，但不能让它工作尝试将其放入 @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;

  }
}

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

【问题讨论】：

声明过渡到导航栏。你可以在这里阅读如何做到这一点：developer.mozilla.org/en-US/docs/Web/CSS/transition-property

标签： css navbar dropdown

【解决方案1】：

在更改元素的 display 属性时，过渡效果不佳。 您可以使用visibility 属性为元素添加过渡，而不是使用显示。

.dropdown-content {

  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;

  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}




.dropdown:hover > .dropdown-content {
    visibility: visible;
    opacity: 1;
}

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

改变过渡时间看看效果。

希望有帮助！

【讨论】：