Animate zweiten Ebene Aufzählungszeichen in slidify

Ich versuche, die zweite (untere) Ebene Aufzählungszeichen in io2012 zu erhalten getrennt von ihren Eltern Aufzählungspunkt zu animieren, wie folgt aus:Animate zweiten Ebene Aufzählungszeichen in slidify

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

ich mehrere Abhilfen versucht haben, mit HTML wie >* anstelle von >+ beim Versuch, das Geschoss mit <div style="padding-left: 1em">>* Second level animated by itself einzurücken.

Dies beschränkt jedoch nur den Text, aber nicht den Aufzählungspunkt. Mein Experiment mit <li style="padding-left: 1em">...</li> ist ebenfalls gescheitert.

Wenn es keine HTML-Lösung gibt, umfasst die Lösung entweder CSS oder JavaScript?

Quelle

2016-05-09 seasmith

Haben Sie versucht, 'list-style mit einer Liste mit erhöhen können: inside; 'in Ihrem verschachtelten Listenelement? Etwas wie dieses: [** jsFiddle Demo **] (https://jsfiddle.net/u4gxm30q/). – Ricky

Ich habe in der HTML bemerkt, dass die erste Ordnung 'ul' die Klasse' incremental' hat. Gibt es eine JS-Verknüpfung, um alle 'ul's mit dieser Klasse anzufügen? – seasmith

Wenn Sie bereit sind, mit einer leicht Hacky Abhilfe zu gehen, ich habe Erfolg gehabt .fragment zu Beginn der Absätze und Kugeln eingefügt, die ich (ein paar anderen Dinge mit meinem Objektträger wurden in Konflikt mit der >- Verknüpfung, obwohl ich animieren wollte habe immer noch nicht herausgefunden was).

In jedem Fall sollte dies funktionieren, auch wenn es ein bisschen kludgy ist.

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

(.fragment fügt eine div class „Fragment“ auf den folgenden Absatz oder Artikel)

Quelle

2016-10-26 13:44:14

Wenn Sie ein Untermenüebene erhöhen möchten, können Sie einen Zähler-Zuwachs in der CSS setzen könnte wie gezeigt in der folgende Ausschnitt:

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>

Allerdings, wenn numerische Listen ist nicht das, was y ou im Sinn hatte, gibt es eine Reihe von Möglichkeiten, sind Sie verschiedene list-style-Typen

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>

this helps

Quelle

2016-11-01 14:16:13

https://jsfiddle.net/RachGal/euq5a7zb/ Numerische https://jsfiddle.net/RachGal/jfvvu9f5/ andere Listenstile –

Animate zweiten Ebene Aufzählungszeichen in slidify

Antwort

Verwandte Themen