web-dev-qa-db-fra.com

Transition CSS: fondu de la couleur de fond, réinitialisation après

J'ai une liste de divs et permets à mon utilisateur d'ajouter un nouveau dynamiquement en postant un nouveau contenu. Si l'utilisateur publie un nouveau contenu, j'aimerais le mettre en surbrillance à l'écran en fondant la couleur d'arrière-plan de la nouvelle div en une autre couleur et en le faisant disparaître. Je suis assez proche:

http://jsfiddle.net/pUeue/1953/

J'utilise ce CSS pour déclencher la transition:

.backgroundAnimated{
    background-color: #AD310B !important;
    background-image:none !important;
   -webkit-transition: background-color 5000ms linear;
   -moz-transition: background-color 5000ms linear;
   -o-transition: background-color 5000ms linear;
   -ms-transition: background-color 5000ms linear;
    transition: background-color 5000ms linear;
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation-direction: alternate;

    -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
    animation-iteration-count: 2;
 }

Je peux passer à l’autre couleur, mais elle ne disparaît pas. Je me demande si quelqu'un a une suggestion pour accomplir cela? Je me rends compte qu'il y a beaucoup de façons de faire cela, mais j'espérais pouvoir le contenir entièrement dans le CSS (à l'exception de l'ajout dynamique de la classe CSS via jQuery.

Merci pour vos suggestions ...

htmlcsscss3
23
BenjiFB

Vous pouvez utiliser des images clés d'animation. Pas de javascript supplémentaire nécessaire.

$('input[type=button]').click( function() {
 $('#newContent').addClass('backgroundAnimated');
});
@-o-keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #AD301B; }
  100% { background-color: #FFFFFF; }
}
@keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #AD301B; }
  100% { background-color: #FFFFFF; }
}

.backgroundAnimated{    
    background-image:none !important; 
         -o-animation: fadeIt 5s ease-in-out; 
            animation: fadeIt 5s ease-in-out; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Old stuff</div>
<div>Old stuff</div>
<div>Old stuff</div>
<div id="newContent">New stuff, just added</div>

<input type="button" value="test" />

46
Larz

Hmmm .. Si vous voulez le conserver en css, vous pouvez ajouter un setTimeout dans votre événement click, puis ajouter une autre classe.

$('input[type=button]').click( function() {
 $('#newContent').addClass('backgroundAnimated');
    setTimeout(function(){
        $('#newContent').addClass('nextBackgroundAnimated');
    }, 5000);
});

CSS ::

.backgroundAnimated{
        background-color: #AD310B !important;
        background-image:none !important;
    -webkit-transition: background-color 5000ms linear;
    -moz-transition: background-color 5000ms linear;
    -o-transition: background-color 5000ms linear;
    -ms-transition: background-color 5000ms linear;
    transition: background-color 5000ms linear;
        -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation-direction: alternate;

        -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */
    animation-iteration-count: 2;
}
.nextBackgroundAnimated{
        background-color: white !important;
        background-image:none !important;
}

http://jsfiddle.net/pUeue/1954/

4
cport1

Si vous pouvez utiliser jquery-ui, cela pourrait aider:

$('input[type=button]').click( function() { 
  var animTime = 1000;
 $('#newContent').addClass('Pulse', animTime).removeClass('Pulse', animTime);
});
.Pulse{
        background-color: #AD310B;     
}
<script src="http://code.jquery.com/jquery-latest.min.js" 
    type="text/javascript" charset="utf-8"></script>
<script	src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
			  type="text/javascript" charset="utf-8"></script>
		
<div>Old stuff</div>
<div>Old stuff</div>
<div>Old stuff</div>
<div id="newContent">New stuff, just added</div>

<input type="button" value="test" />

0
Koray