代码之家  ›  专栏  ›  技术社区  ›  Sunil Garg

如何在CSS中隐藏带有幻灯片效果的li[重复]

  •  0
  • Sunil Garg  · 技术社区  · 6 年前

    我有一个 ul 点击其中一个 li 我想把潜艇藏起来 UL 在它的滑动效果。我试过了 animation 具有 height 从100%到0。但这不起作用。

    这是代码片段,在实际场景中,会有动态数据和n个

    function hide() {
      var li = document.getElementById("game");
      game.classList.add("hide")
    }
    .hide {
      height: 0;
      overflow: hidden;
      animation-name: example;
      animation-duration: 4s;
    }
    
    @keyframes example {
      0% {
        height: 100%;
      }
      25% {
        height: 75%;
      }
      50% {
        height: 50%;
      }
      100% {
        height: 0%;
      }
    }
    <ul>
      <li>A</li>
      <li onclick="hide()">b</li>
      <li id="game" style="height:100%">
        <ul>
          <li>1</li>
          <li>2</li>
        </ul>
      </li>
    
    </ul>

    我怎样才能做到这一点?

    1 回复  |  直到 6 年前
        1
  •  1
  •   R.F. Nelson    6 年前

    在您的示例中,使用百分比不起作用。

    解决方案1 :您需要在 @keyframes 就像这样:

    function hide() {
      var li = document.getElementById("game");
      game.classList.add("hide")
    }
    .hide {
      height: 0;
      overflow: hidden;
      animation-name: example;
      animation-duration: 1s;
    }
    
    @keyframes example {
      0% {
        height: 40px;
      }
      25% {
        height: 30px;
      }
      50% {
        height: 20px;
      }
      100% {
        height: 0px;
      }
    }
    <ul>
      <li>A</li>
      <li onclick="hide()">b</li>
      <li id="game">
        <ul>
          <li>1</li>
          <li>2</li>
        </ul>
      </li>
    
    </ul>

    解决方案2: 向父级添加固定高度 <ul> 元素,然后可以在 @keyframe 是这样的:

    函数hide()。{
    var li=document.getElementByID(“游戏”);
    game.classlist.add(“隐藏”)
    }
    .hide {
      height: 0;
      overflow: hidden;
      animation-name: example;
      animation-duration: 1s;
    }
    
    ul {
      height: 200px;
    }
    
    @keyframes example {
      0% {
        height: 100%;
      }
      25% {
        height: 75%;
      }
      50% {
        height: 50%;
      }
      100% {
        height: 0%;
      }
    }
    <UL & GT;
    <li>A</li>
    <li onclick=“hide()”>b</li>
    <li id=“game”>
    <ul>
    <li>1</li>
    <li>2</li>
    </ul>
    </li>
    
    </ul>

    Here is an article 关于这个问题的细节。