Animate second level bullet points in slidify Animate second level bullet points in slidify r r

Animate second level bullet points in slidify


If you are willing to go with a slightly hacky workaround, I have had success inserting .fragment at the start of paragraphs and bullets that I wanted to animate (some other things with my slides were conflicting with the >- shortcut, though I still have not figured out what).

In any case, this should work, even if it is a bit kludgy.

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

(.fragment adds a div class "fragment" to the following paragraph or item)


If you want a sub level menu to increment, you could set a counter-increment in the css like demonstrated in the following snippet:

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>

However if numerical lists is not what you had in mind, there are a number of ways you can increment a list using various list-style types

 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>

Hope this helps