Eine CSS-Klasse zu schnell schalten, um sie zu registrieren?

Ich habe eine HTML5-Seite mit einer SVG auf sie bekommt dieEine CSS-Klasse zu schnell schalten, um sie zu registrieren?

<path id="outlineCO" class="state included" [details omitted]/>

Ich habe folgende CSS beinhaltet:

.state { 
     fill: #ffff66; 
     fill-opacity: 0.7; 
     stroke: #000000; 
     stroke-width: 1; 
     stroke-opacity: 1; 
    } 
    .state.included { 
     fill: cyan; 
     fill-opacity: 1; 
     transition: fill 2s ease-in; 
    } 
    .state.included.new { 
     fill: magenta; 
     transition: none; 
    }

Der Kern ist, dass die Staaten auf meiner US-Karte einen Standardhintergrund haben ; Staaten, die "eingeschlossen" sind, haben einen anderen Hintergrund; und gibt an, dass temporär auch der Klassenname "neu" einen anderen Hintergrund bekommt.

jQuery verwenden, wenn ich folgend in Chrome-Konsole ausführen,

$("#outlineCO").toggleClass("new");

Ich sehe Colorado Hintergrundfarbe ändert von Cyan Magenta, wie erwartet. Wenn ich denselben Code wieder ausführe, sehe ich Colorado Übergang von Magenta zurück zu Cyan über einen Zeitraum von 2 Sekunden.

Allerdings, wenn ich ausführen entweder

$("#outlineCO").toggleClass("new"); $("#outlineCO").toggleClass("new");

oder

$("#outlineCO").toggleClass("new").toggleClass("new");

nichts passiert. Die Farbe bleibt die ganze Zeit blau. Es ist, als ob die Hinzufügung von "neu" zu dem Element nicht registriert ist, bis ich es entferne. Gibt es eine gewisse Zeit, die verstreichen muss, bevor die Addition registriert wird, so dass die Entfernung den gewünschten Effekt hat, den Zustand sofort auf Magenta und dann langsam auf Cyan umzuschalten?

Quelle

2017-12-15 Green Grasso Holm

Der Browser eine Chance, neu zu zeichnen gegeben werden muss. Für jede Veränderung des Doms ist keine solche Chance gegeben. Was ist eine Frage, die ich habe, warum versuchen Sie, eine Klasse so schnell hinzuzufügen und zu entfernen? Willst du etwas blinzeln oder blinken lassen oder was? – Taplar

Anstatt eine Klasse hinzuzufügen und zu entfernen, um diese Logik auszuführen, erstellen Sie eine Klasse, die einem Übergang mit Schritten zugeordnet ist. Die Schritte würden sofort zu Magenta wechseln und dann schrittweise zurück ändern. https://css-tricks.com/using-multi-step-animations-transitions/ – Taplar

Es ist eine interaktive Karte, die den Status mehrerer Staaten in einem ausgewählten Jahr zeigt. Wenn ein Jahr ausgewählt wird, werden Zustände, die bereits in früheren Jahren "enthalten" waren, in Cyan angezeigt, während Zustände, die zuerst in diesem Jahr enthalten sind, mit Magenta und dann mit Übergang zu Cyan beginnen. (So funktioniert eine bestehende Flash-Version. Wir bauen sie in HTML5 um.) Angenommen, 2015 ist ausgewählt, und Colorado wurde 2009 erstmals "eingeschlossen". Es erscheint also in Cyan. Wenn der Benutzer nun 2009 auswählt, muss Colorado direkt zu Magenta wechseln und dann zurück zu Cyan wechseln. Das ist der Effekt, den ich anstrebe. –

Wenn Sie jQuery bleiben wünschen, können Sie die toggleClass Methode aus der jQuery UI-Bibliothek verwenden könnten (siehe docs), die auch einen Dauerparameter (ms) akzeptiert.

Siehe das Snippet unten (Dauer bis 1000 ms eingestellt ist):

$('#square').toggleClass('new', 1000).toggleClass('new', 1000);

#square { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #ccc; 
 
} 
 

 
#square.new { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script 
 
    src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
 
    integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" 
 
    crossorigin="anonymous"></script> 
 
<div id="square"></div>

Quelle

2017-12-15 16:26:00

Eine CSS-Klasse zu schnell schalten, um sie zu registrieren?

Antwort

Verwandte Themen