Css从显示无到显示块，使用subnav导航 [英] Css transition from display none to display block, navigation with subnav

问题描述

这就是我的 jsFiddle链接

  nav.main ul ul {position：absolute; list-style：none;显示：无;不透明度：0;知名度：隐藏;填充：10px; background-color：rgba（92,91,87,0.9）; -webkit-transition：不透明度600ms，可视性600ms;过渡：不透明度600毫秒，可视性600毫秒;} nav.main ul li：hover ul {display：block;可见度：可见的; opacity：1;}  

< nav class =main > < UL> <李> < a href => Lorem< / a> < UL> < li>< a href => Ipsum< / a>< / li> < li>< a href => Dolor< / a>< / li> < li>< a href =>坐< / a>< / li> < li>< a href => Amet< / a>< / li> < / UL> < /锂> < / ul>< / nav>

没有过渡？如果我设置

  nav.main ul li：hover ul {
 display：block; 
可见性：可见; 
 opacity：0; / *改变了这一行* / 
} 
  

然后subnav永远不会出现当然），但为什么不透明度的转变不会触发？如何获得转换工作？

解决方案

正如您所知道显示属性不能动画，但只需将它放在CSS中就可以覆盖可见性和不透明度转换。

解决方案...刚删除显示属性。

  nav.main ul ul {position：absolute; list-style：none;不透明度：0;知名度：隐藏;填充：10px; background-color：rgba（92,91,87,0.9）; -webkit-transition：不透明度600ms，可视性600ms;过渡：不透明度600毫秒，可视性600毫秒;} nav.main ul li：hover ul {visibility：visible; opacity：1;}  

< nav class =main > < UL> <李> < a href => Lorem< / a> < UL> < li>< a href => Ipsum< / a> < /锂> < li>< a href => Dolor< / a> < /锂> < li>< a href =>坐< / a> < /锂> < li>< a href => Amet< / a> < /锂> < / UL> < /锂> < / nav>

This is what I have jsFiddle link

nav.main ul ul {
    position: absolute;
    list-style: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    padding: 10px;
    background-color: rgba(92, 91, 87, 0.9);
    -webkit-transition: opacity 600ms, visibility 600ms;
            transition: opacity 600ms, visibility 600ms;
}

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 1;
}

<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
    </ul>
</nav>

Why is there no transition? If I set

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 0; /* changed this line */
}

Then the "subnav" will never appear (of course ) but why does the transition on the opacity not trigger? How to get the transition working?

解决方案

As you know the display property cannot be animated BUT just by having it in your CSS it overrides the visibility and opacity transitions.

The solution...just removed the display properties.

nav.main ul ul {
  position: absolute;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  padding: 10px;
  background-color: rgba(92, 91, 87, 0.9);
  -webkit-transition: opacity 600ms, visibility 600ms;
  transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
  visibility: visible;
  opacity: 1;
}

<nav class="main">
  <ul>
    <li>
      <a href="">Lorem</a>
      <ul>
        <li><a href="">Ipsum</a>
        </li>
        <li><a href="">Dolor</a>
        </li>
        <li><a href="">Sit</a>
        </li>
        <li><a href="">Amet</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

这篇关于Css从显示无到显示块，使用subnav导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！