it-swarm.com.de

Ein "Blitz" von Farbe, der reine CSS-Übergänge verwendet

Ich versuche, den Benutzern bei einem Klickereignis einen "Farbenblitz" zu geben. Ich kann die Farbe mit einem Übergang auf eine ansprechende Weise erscheinen lassen, jedoch möchte ich, dass die Farbe nach 0,5 s verschwindet, ohne die "aktive" Klasse zu entfernen. Eine Voraussetzung ist jedoch, dass ich keine jQuery-Animationen verwenden kann, und dies muss in CSS erfolgen. 

Unten ist die CSS, die ich derzeit verwende. 

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

Ich habe versucht, einen zweiten Wert anzugeben, denke aber nicht, dass dies ein gültiges Markup ist, da es nicht funktioniert.

.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

21
zmanc

Ich denke, das ist, wonach du suchst. Die Probe ist nicht genau.

$("#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>

Ich hoffe, Sie bekommen die Lösung, die Sie suchen.

BEARBEITEN: 

Ich habe Ihren JS-Bin bearbeitet.

Das ist genau das, wonach Sie suchen

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

30
Rohith

Ich kam aufgrund meiner eigenen Bedürfnisse mit dem Folgenden aus. Ich wollte einen Farbblitz, um eine Benutzeraktion zu bestätigen. Der Text blinkt einmal, wenn Sie darauf klicken. Es verwendet Jquery, um die Klasse festzulegen, jedoch nicht für die 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; }
}

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

8
PointZeroTwo

Sie könnten versuchen, ein bisschen mit einem Pseudoelement zu spielen und zwei Übergänge zu verketten

der erste Übergang ändert nur die Farbe (mit einem schnellen Effekt), während der zweite die Deckkraft des Pseudoelements nach einer 0.1s-Verzögerung ändert (so dass es bald verschwindet). Sie können diese Werte beliebig anpassen 

#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;
}

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

1
fcalderan

Beeindruckt von Rohiths Antwort, hier ist meine eigene JSFiddle-Demo (mit zusätzlicher Funktionalität)

Der Hauptteil ist das CSS (oder, wie ich es möchte, 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;
}

Und ich fand es auch nützlich, die Klasse am Ende der Animation selbst entfernen zu können (damit ich sie später wieder hinzufügen kann, wenn ich die Animationen wieder sehen wollte):

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