Question

当您点击“汉堡包”时，我试图让我的导航过渡从0％到20％的宽度。图标。它在我打开导航时起作用，但在我关闭它时不起作用。

以下是一些CSS

    .nav-toggle.active + nav {
width: 20%;
transition: all 500ms ease-in-out;
visibility:visible;
}

nav {
  height: 2em;
  width: 0%;
  line-height: 2em;
  position: absolute; 
  left: 5%; 
  top: 4.5%;
  background: rgba(144, 198, 149, 1);
  border-radius: 5px;
  text-align: center;
  visibility: hidden;
}

如果没有“知名度”，我也会尝试同样的事情。属性。

以下是带有汉堡包图标的http://codepen.io/anon/pen/wawRYX，更多是视觉效果。

Answer 1

nav仅在拥有类.active时才会转换，当您删除该类时，您删除了转换。 <nav>必须具有样式转换：

nav {
  height: 2em;
  width: 0%;
  line-height: 2em;
  position: absolute; 
  left: 5%; 
  top: 4.5%;
  background: rgba(144, 198, 149, 1);
  border-radius: 5px;
  text-align: center;
  visibility: hidden;
  transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
}

JSFiddle Demo

Answer 2

仅在应用.active类时进行转换的原因是因为您在应用.active时仅将转换应用于导航和导航栏。将过渡属性添加到导航栏和导航栏，以便在有.active类的情况下进行过渡。

这是updated codepen。

当我关闭导航时，为什么我的过渡不起作用？

2 个答案: