动画在有序列表上

Question

How do i make an animation on this ordered list? 如何在此有序列表上制作动画？

I want the ordered list to open from the top to the bottom by useing ".hide" and ".show" but i cant get it to work. 我希望通过使用“ .hide”和“ .show”从顶部到底部打开有序列表，但我无法使其正常工作。 dose anyone know how to do with CSS or Javascript? 有人知道如何使用CSS或Javascript吗？

Looking for help 寻求帮助

<!DOCTYPE html>
<html>
<head>
<script>

function loadul (name)
{
  var elem = document.getElementById(name);
  if(elem.style.display == "block")
  { 
      elem.style.display = "none";
      $("#work").click(function(){
        $(".test").hide(1000);
        });
  }
  else
  { 
      elem.style.display = "block";
      $("#work").click(function(){
        $(".test").show(1000);
        });
  }
}
</script>
</head>
<body>

<li id="work" OnClick="loadul('CTR')">List</li>
<ol class="test" id="CTR">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>

</body>
</html>

Answer 1

Hope this can help you, you can change the transition animation in the sub-list class. 希望对您有所帮助，您可以在子列表类中更改过渡动画。 I'm adding an removing the "show-list" and "hide-list" class just to do a toggle. 我添加一个删除“ show-list”和“ hide-list”类只是为了进行切换。

<!DOCTYPE html>
<html>
<head>
<style>
.sub-list {
    overflow: hidden;
    transition: all 300ms;
}
</style>
<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script>

function loadul (name)
{
  var elem = $('#'+name);
  if(elem.hasClass('show-list')){
    elem.removeClass('show-list');
    elem.addClass('hide-list')
    elem.data('height', elem.outerHeight())
    elem.css('height', '0px')
  }else {
    elem.removeClass('hide-list');
    elem.addClass('show-list')
    elem.css('height', elem.data('height'))
  }
}
</script>
</head>
<body>

<li id="work" OnClick="loadul('CTR')">
    List
</li>
<ol class="sub-list show-list" id="CTR">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
 </ol>

</body>
</html>

Answer 2

Below is an example of how I would structure your html and javascript. 以下是我将如何构造您的html和javascript的示例。 I've changed your external li to something that might make a little more sense. 我已将您的外部用户更改为可能更有意义的内容。 And since you've shown you are using jQuery i've used .each() in order to iterate through your li elements one at a time multiplying a delay based on their index. 并且由于您已经显示了使用的是jQuery，所以我使用.each（）来一次遍历li元素，并根据它们的索引乘以一个延迟。 Here's a Pen example as well. 这也是Pen的例子。

HTML: HTML：

<button id="work" OnClick="loadul('CTR')">List</button>
<ol class="test no-margin" id="CTR">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>

Javascript: 使用Javascript：

function loadul(name) {
  $("#" + name + " li").each(function(index) {
    if ($(this).is(":visible")) {
      $(this)
        .delay(1000 * index)
        .hide(0);
    } else {
      $(this)
        .delay(1000 * index)
        .show(0);
    }
  });
}

CSS: CSS：

ol.no-margin {
  margin-top: 0px;
  margin-bottom: 0px;
}

动画在有序列表上

问题描述

2 个解决方案

解决方案1
0 已采纳 2018-10-31 15:33:01

解决方案2
0 2018-10-31 15:36:11

动画在有序列表上

问题描述

2 个解决方案

解决方案1 0 已采纳 2018-10-31 15:33:01

解决方案2 0 2018-10-31 15:36:11

解决方案1
0 已采纳 2018-10-31 15:33:01

解决方案2
0 2018-10-31 15:36:11