在 slidify 中动画二级项目符号点答案

【问题标题】：Animate second level bullet points in slidify在 slidify 中动画二级项目符号点
【发布时间】：2016-09-04 15:07:38
【问题描述】：

我正在尝试让io2012 中的第二（较低）级项目符号点与其父项目符号点分开动画，如下所示：

>* First level animates by itself
  >+ Second level then animates by itself
>* Another first level animates by itself

我尝试了几种使用 HTML 的变通方法，例如使用 >* 代替 >+，同时尝试使用 <div style="padding-left: 1em">>* Second level animated by itself 缩进项目符号。

但是，这只是缩进文本而不是项目符号点。我对<li style="padding-left: 1em">...</li> 的实验同样失败了。

如果没有 HTML 解决方案，该解决方案是否涉及 CSS 或 JavaScript？

【问题讨论】：

您是否尝试过在嵌套列表项元素中使用list-style: inside;？像这样的东西：jsFiddle demo.
我在 HTML 中注意到第一个订单 ul 具有类 build incremental。是否有 JS 快捷方式将所有 ul 附加到此类？

标签： javascript css r r-markdown slidify

【解决方案1】：

如果您愿意采用一个有点老套的解决方法，我已经成功地在我想要动画的段落和项目符号的开头插入了.fragment（我的幻灯片中的一些其他内容与>- 快捷方式冲突，虽然我还没有弄清楚是什么）。

无论如何，这应该可以工作，即使它有点笨拙。

- .fragment First level animates by itself
    - .fragment Second level then animates by itself
- .fragment Another first level animates by itself

（.fragment在后面的段落或项目中添加一个div类“片段”）

【讨论】：

【解决方案2】：

如果您希望子级菜单增加，您可以在 css 中设置一个计数器增量，如下面的 sn-p 所示：

ol {
    counter-reset: item
}
li {
    display: block;
}
li:before {
    content: counters(item, ".")" ";
    counter-increment: item
}

<ol>
    <li>one</li>
    <li>two
        <ol>
            <li>two.one</li>
            <li>two.two</li>
            <li>two.three</li>
        </ol>
    </li>
    <li>three
        <ol>
            <li>three.one</li>
            <li>three.two</li>
            <ol>
                <li>three.two.one</li>
                <li>three.two.two</li>
            </ol>
        </ol>
    </li>
    <li>four</li>
</ol>

但是，如果数字列表不是您的想法，您可以通过多种方式使用各种列表样式类型来增加列表

 h2.title {
     font-size: 20px;
     font-weight: 800;
     margin-left:-20px;
     padding: 12px;
     counter-increment: ordem;
 }

li.heading {
     font-size: 16px;
     font-weight: bold;
     padding: 12px;
    list-style-type:none;
 }


 .bullet {
     counter-reset: bullet;
     padding-left: 12px;
 }
 .bullet li {
     list-style-type: none;
    
 }
 .bullet li:before {
     counter-increment: bullet;
     content: counter(ordem)"." counter(bullet)" ";
 }
 ol.none {
     list-style:none!important
 }
li.s2sub::before {
     counter-increment:none!important;
    content:none!important;
 }
 li.s2sub {
     list-style:upper-alpha;
 }
 li.s3sub::before {
     counter-increment:none!important;
    content:none!important;
 }
 li.s3sub {
     list-style-type:circle;
 }
li.roman::before {
     counter-increment:none!important;
    content:none!important;
 }
 li.roman {
     list-style:lower-roman inside;

 }

<body>
    <ol>
        <h2 class="title">Section 1</h2> 
        <li class="heading">Heading 1</li>

        <ol class="bullet">
            <li>text 1 one</li>
            <li>text 1 two</li>
            <li>text 1 three</li>
            <li>text 1 four</li>
        </ol> 
        <li class="heading">Heading 2</li>

        <ol class="bullet">
            <li class="roman">Item 1</li>
            <li class="roman">Item 2</li>
            <li class="roman">Item 3</li>
        </ol>
        <h2 class="title">Section 2</h2>
        <ol class="bullet">
            <li>First item
                <ol>
                    <li class="s2sub">First subitem</li>
                    <li class="s2sub">Second subitem</li>
                </ol>
            </li>
            <li>Second Item</li>
            <li>Third Item</li>
        </ol>
        <h2 class="title">Section 3</h2>
        <ol class="bullet">
            <li>First item
                <ol>
                    <li class="s3sub">First subitem</li>
                    <li class="s3sub">Second subitem</li>
                </ol>
            </li>
            <li>Second item</li>
            <li>Third item</li>
        </ol>
    </ol>
</body>

希望对你有帮助

【讨论】：

jsfiddle.net/RachGal/euq5a7zb 数字 jsfiddle.net/RachGal/jfvvu9f5 其他列表样式