Anima punti secondo livello di proiettile in slidify

Sto cercando di ottenere il secondo punto (in basso) livello di proiettile in io2012 animare separatamente dal loro punto genitore proiettile, in questo modo:Anima punti secondo livello di proiettile in slidify

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

Ho provato diverse soluzioni alternative con HTML come l'utilizzo di >* al posto di >+ durante il tentativo di rientro del punto elenco con <div style="padding-left: 1em">>* Second level animated by itself.

Tuttavia questo appena fa rientrare il testo ma non il punto elenco. Analogamente, la mia sperimentazione con <li style="padding-left: 1em">...</li> non è riuscita.

Se non esiste una soluzione HTML, la soluzione riguarda sia CSS che JavaScript?

fonte

2016-05-09 seasmith

Hai provato a usare 'list-style: all'interno; 'nel tuo elemento dell'elemento dell'elenco nidificato? Qualcosa del genere: [** jsFiddle demo **] (https://jsfiddle.net/u4gxm30q/). – Ricky

Ho notato nell'HTML che il primo ordine 'ul' ha classe' build incremental'. C'è una scorciatoia JS per aggiungere tutti gli 'ul' con questa classe? – seasmith

Se siete disposti ad andare con una soluzione un po 'hacky, ho avuto successo inserendo .fragment all'inizio di paragrafi e proiettili che ho voluto animare (alcune altre cose con le mie diapositive sono stati in conflitto con la scorciatoia >-, anche se ancora non ho capito cosa).

In ogni caso, questo dovrebbe funzionare, anche se è un po 'cauto.

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

(.fragment aggiunge una classe div "frammento" al paragrafo seguente o articolo)

fonte

2016-10-26 13:44:14

Se si desidera un menu di livello sub per incrementare, è possibile impostare un counter-increment nel css come dimostrato in il seguente frammento:

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>

Tuttavia se elenchi numerici non è quello y ou aveva in mente, ci sono un certo numero di modi per incrementare un elenco utilizzando vari tipi list-style

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>

Spero che questo aiuti

fonte

2016-11-01 14:16:13

https://jsfiddle.net/RachGal/euq5a7zb/ Numerico https://jsfiddle.net/RachGal/jfvvu9f5/ altri stili di elenco –

Anima punti secondo livello di proiettile in slidify

risposta

Problemi correlati