0
votes

Disparaître une nouvelle ligne dans le CSS

J'ai donc cette table, où je sais comment mettre en évidence le 2e enfant. Cependant, je veux que cela disparaisse, de sorte qu'il est évident qu'une nouvelle ligne est ajoutée. Pour le moment, la deuxième rangée est toujours mise en surbrillance, cependant voudrait des conseils sur la façon de se décomposer pour CSS (non pas d'occasion jQuery dans mon code)

J'ai remarqué qu'il y a une option FADEOUT dans JQuery, mais quelqu'un peut-il dire moi comment fadeout dans le CSS ordinaire. Vous trouverez ci-dessous la ligne qui met en évidence la 2e rangée. Je voudrais disparaître pour dénoter qu'une nouvelle ligne a été ajoutée à la table. P>

tr:nth-child(2){background-color: red;}

css row fadeout

0 commentaires

3 Réponses :

2
votes

Si j'ai compris ce que vous avez demandé, vous pouvez le faire avec Animation CODE>

tr:nth-child(2){
  background-color: red;
  animation: fadeout 2s forwards;
}

@keyframes fadeout {
    to {
        background-color:#ffffff;
    }
}

2 commentaires

Merci. Cela fonctionne, mais chaque fois que je recharge la page de cette animation. Je veux que l'animation ne donne que si une nouvelle ligne est ajoutée. Pas à chaque fois que je rafraîchis la page.

Si vous ne nous dites pas comment obtenez-vous cette nouvelle ligne, nous ne pouvons pas vous donner une réponse précise. Postez le code où nous pouvons voir comment vous obtenez la nouvelle ligne.

0
votes

Vous recherchez Transitions . Vous pouvez voir de bons exemples / suggestions ici .

Ma recommandation apprend à utiliser Facilem-out .



                                                                    
                                    
                                    
                                        0 commentaires


                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Vous devez envisager  CSS  code> : cible . 

   Le: Cible CSS pseudo-classe représente un élément unique (la cible
  élément) avec un identifiant correspondant au fragment de l'URL.  p>
 BlockQuote> 
 Donnez à chacune de vos lignes de table un ID  code> unique  code>. En utilisant : cible  code> dans notre CSS, nous pouvons intercepter l'existence de cet identifiant  dans la barre d'adresse  forte> et déclencher l'animation de FADE OUT en conséquence. L'animation  seul  em> se produit sur la page Actualiser si l'ID  code> dans le fragment de barre d'adresse correspond au  ID  code> sur le    Code>.  p> 
  p> 


<table>
  <tbody>
    <tr id="row_1">
      <td>one</td>
    </tr>
    <tr id="row_2">
      <td>two</td>
    </tr>
  </tbody>
</table>

<!-- Matches www.mysite.com#row_1 -->
<a href="#row_1">Simulate fadeout row 1</a>

<!-- Matches www.mysite.com#row_2 -->
<a href="#row_2">Simulate fadeout row 2</a>

                                

                                                                    
                                    
                                    
                                        0 commentaires