• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

will-change Verständnisfrage

Chronos

Chronos

Aktives Mitglied
Hallo Forum,

der eine oder andere hat sicher schon mal von der CSS-Eigenschaft "will-change" (nativ unterstützt in Chrome und Opera, Firefox über Flags)
( https://dev.opera.com/articles/css-will-change-property/ ) gehört;

Um Animationen hardwarebeschleunigt laufen zu lassen gibt es ja den alten translateZ() / translate3d() -Hack.

"will-change" setzt insofern an derselben Stelle an um vorab dem Browser zu sagen "hier wird etwas animiert, bereite dich darauf vor und optimiere den Vorgang" was auch noch mal hier gezeigt wird

Jetzt zu meinem "Problem"; ich habe mir über zwei DIVs eine Progressbar gebastelt.
Mit JavaScript füge ich eine Klasse hinzu um diese zu füllen, und eine um diese animiert zu leeren. Die jeweils nicht verwendete Klasse wird dann natürlich entfernt. Der Effekt ist einfach nur Transition und width von 0 auf 100% setzen.

Das sieht dann in etwa so aus:
HTML: 
<div class="main-slider-progressbar">
    <div class="main-slider-progressbar-position"></div>
</div>

CSS:
Code: 
decrease-progress {
  width: 0;
  transition: width 1s linear;
}

increase-progress {
  width: 100%;
  transition: width 6.8s linear;
}

Mein Javascript fügt Event-gesteuert diese beiden Klassen hinzu/entfernt diese von "main-slider-progressbar-position".

Jetzt meine Frage, an welche Stelle müsste ich "will-change: transform;" einfügen, meine Vermutung wäre jetzt eigentlich zur Klasse "main-slider-progressbar-position" damit schon vorher klar ist, hier wird mal eine transition angewandt. Was natürlich auch sein kann, dass man ich die beiden *-progress -Klassen nutzen muss.

Liege ich mich meiner Vermutung richtig? + Wie würde ich etwaige Verbesserungen testen können?
 
Chronos schrieb:
Hallo Forum,

der eine oder andere hat sicher schon mal von der CSS-Eigenschaft "will-change" (nativ unterstützt in Chrome und Opera, Firefox über Flags)
( https://dev.opera.com/articles/css-will-change-property/ ) gehört;

Um Animationen hardwarebeschleunigt laufen zu lassen gibt es ja den alten translateZ() / translate3d() -Hack.

"will-change" setzt insofern an derselben Stelle an um vorab dem Browser zu sagen "hier wird etwas animiert, bereite dich darauf vor und optimiere den Vorgang" was auch noch mal hier gezeigt wird

Jetzt zu meinem "Problem"; ich habe mir über zwei DIVs eine Progressbar gebastelt.
Mit JavaScript füge ich eine Klasse hinzu um diese zu füllen, und eine um diese animiert zu leeren. Die jeweils nicht verwendete Klasse wird dann natürlich entfernt. Der Effekt ist einfach nur Transition und width von 0 auf 100% setzen.

Das sieht dann in etwa so aus:
HTML: 
<div class="main-slider-progressbar">
    <div class="main-slider-progressbar-position"></div>
</div>

CSS:
Code: 
decrease-progress {
  width: 0;
  transition: width 1s linear;
}

increase-progress {
  width: 100%;
  transition: width 6.8s linear;
}

Mein Javascript fügt Event-gesteuert diese beiden Klassen hinzu/entfernt diese von "main-slider-progressbar-position".

Jetzt meine Frage, an welche Stelle müsste ich "will-change: transform;" einfügen, meine Vermutung wäre jetzt eigentlich zur Klasse "main-slider-progressbar-position" damit schon vorher klar ist, hier wird mal eine transition angewandt. Was natürlich auch sein kann, dass man ich die beiden *-progress -Klassen nutzen muss.

Liege ich mich meiner Vermutung richtig? + Wie würde ich etwaige Verbesserungen testen können?
Zum Vergrößern anklicken....

Yeah, auf so eine Eigenschaft habe ich lange gehofft. CSS Animationen sind ja was das Timing angeht einfach nur lächerlich.
Hoffentlich klappt das auch.

Also, helfen kann ich dir leider nicht, würde es aber genauso wie du bei main-slider-progressbar-position platzieren.
Werde das diese Woche jedenfalls auch mal versuchen.
 
scbawik schrieb:
Yeah, auf so eine Eigenschaft habe ich lange gehofft. CSS Animationen sind ja was das Timing angeht einfach nur lächerlich.
Hoffentlich klappt das auch.

Also, helfen kann ich dir leider nicht, würde es aber genauso wie du bei main-slider-progressbar-position platzieren.
Werde das diese Woche jedenfalls auch mal versuchen.
Zum Vergrößern anklicken....

Macht nichts, ich denke nur dass es dort eben am meisten Sinn macht. Weil man erweitert ja die Klasse um eine transition. Kenne mich leider auch nicht gut genug aus um in den Dev-Tools etwas feststellen zu können.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben