web-dev-qa-db-fra.com

Un "flash" de couleur, utilisant des transitions css pures

J'essaie de donner aux utilisateurs un "flash" de couleur quand il y a un événement de clic. Je peux faire en sorte que la couleur apparaisse de façon agréable en utilisant une transition, mais je veux que la couleur disparaisse après 0,5s, sans supprimer la classe "active". Une condition est cependant que je ne peux pas utiliser les animations jQuery et cela doit être fait en CSS. 

Ci-dessous, le css que j'utilise actuellement. 

.active{
  background-color: yellow;
  -webkit-transition: background-color .5s linear;
  transition: background-color .5s linear;
}

J'ai essayé de spécifier une deuxième valeur, mais je ne pense pas que ce soit un balisage valide, car cela ne fonctionne pas.

.active{
  background-color: yellow;
  -webkit-transition: background-color .5s linear, background-color:transparent .5s linear;
  transition: background-color .5s linear, background-color:transparent .5s linear;
}

http://jsbin.com/itivum/1/edit

csshtml5css3
21
zmanc

Je pense que c'est ce que vous recherchez. L'échantillon n'est pas exact.

$("#go").click(function() {
    $("#box").removeClass("demo");
    setTimeout(function() {
        $("#box").addClass("demo");
    }, 1);
});
.container {position: relative;}

#box {
    height: 100px; 
    width: 100px; 
    background-color: #777;
    position: absolute;
    left: 5px;
    top: 5px;
    opacity: 0;
}

@-webkit-keyframes demo {
    0% {
        background-color: Yellow;
        opacity:1;
    }
    22% {
        background-color: Yellow;
    }
    77% {
        background-color: Red;
    }
    100% {
        background-color: #777;
    }
}
    
.demo {
    -webkit-animation-name: demo;
    -webkit-animation-duration: 900ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="go">Go</button>
<div class="container">
    <div id="box"></div>
</div>

J'espère que vous obtiendrez la solution que vous recherchez.

MODIFIER : 

J'ai édité votre JS Bin.

Ce sera ce que vous cherchez exactement

http://jsbin.com/imonab/1/edit

30
Rohith

Je suis venu avec ce qui suit en fonction de mes propres besoins. Je voulais un éclair de couleur pour confirmer l'action de l'utilisateur. Le texte clignote une fois lorsque vous cliquez dessus. Il utilise jquery pour définir la classe, mais pas pour l'animation.

Html:

<span style="background:lightgray" id="id">Click to flash</span>

Js:

$('#id').click(function() {
    $('#id').addClass('flash');
    setTimeout(function() {
          $('#id').removeClass('flash');
    }, 500);
});

Css:

.flash {
    -webkit-animation-name: flash-animation;
    -webkit-animation-duration: 0.3s;

    animation-name: flash-animation;
    animation-duration: 0.3s;
}

@-webkit-keyframes flash-animation {  
    from { background: yellow; }
    to   { background: default; }
}

@keyframes flash-animation {  
    from { background: yellow; }
    to   { background: default; }
}

Voir http://jsfiddle.net/umz8t/3597/

8
PointZeroTwo

Vous pouvez essayer de jouer un peu avec un pseudoélément en enchaînant deux transitions

la première transition change simplement la couleur (avec un effet rapide) tandis que la seconde ne fait que changer l'opacité du pseudoélément (il disparaît donc rapidement) après un délai de 0.1s. N'hésitez pas à ajuster ces valeurs à votre guise 

#imADiv{
  margin-top:50px;
  height:150px;
  width:150px;
  position:absolute;
}

#imADiv:before {
  position: absolute;
  z-index: -1;
  top: 0; left: 0; width: 100%; height:100%;
  content: "";
  -webkit-transition: background .1s linear 0s, opacity .01s linear .1s;
  transition: background .1s linear 0s, opacity .01s linear .1s;

}

#imADiv.active:before {
  background-color: yellow;
  opacity: 0;
}

Exemple jsbin: http://jsbin.com/isihos/3/edit

1
fcalderan

Impressionné par la réponse de Rohith, voici ma propre démo de JSFiddle (avec fonctionnalité ajoutée)

La partie principale est le CSS (ou comme je préfère, SCSS):

@-webkit-keyframes quickFlash {
  0% {
    background-color: yellow;
    opacity: 1;
  }
  100% {
    background-color: inherit;
  }
}

.quickFlash {
  //https://stackoverflow.com/questions/16791851/a-flash-of-color-using-pure-css-transitions
  -webkit-animation-name: quickFlash;
  -webkit-animation-duration: 1900ms;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -moz-animation-name: quickFlash;
  -moz-animation-duration: 1900ms;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
}

Et j’ai également trouvé utile de pouvoir supprimer la classe à la fin de l’animation (pour pouvoir la rajouter ultérieurement si je voulais revoir les animations):

function flashYellow(element) {
  element
    .addClass("quickFlash")
    .on(
      "webkitAnimationEnd oanimationend msAnimationEnd animationend",
      function() {
        console.log("animationend");
        $(this)
          .delay(500)// Wait for milliseconds.
          .queue(function() {            
            console.log("end of delay");
            $(this)
              .removeClass("quickFlash")
              .dequeue();
          });
      }
    );
}
0
Ryan