will-change Verständnisfrage

[Chronos]

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:

<div class="main-slider-progressbar">
    <div class="main-slider-progressbar-position"></div>
</div>

CSS:

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?

 

[scbawik]

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:

<div class="main-slider-progressbar">
    <div class="main-slider-progressbar-position"></div>
</div>

CSS:

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?

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.

 

[Chronos]

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.

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.

 

[Trüffelkrieger]

Ich denke, dieser Artikel hier dürfte dir weiterhelfen (nur überflogen): https://dev.opera.com/articles/css-will-change-property/

 

[Chronos]

Ich denke, dieser Artikel hier dürfte dir weiterhelfen (nur überflogen): https://dev.opera.com/articles/css-will-change-property/

ey, meinen Eingangspost hast du auch nur überflogen oder?
Den Artikel hab ich selbst verlinkt !!

Daraus wurde ich aber leider nicht ganz schlau ;)

 

[Trüffelkrieger]

ups, sorry!
Habe gerade mal genauer reingeschaut, aber auf deinen Fall, dass eine Klasse dynamisch hinzugefügt wird ... Naja, auch keine andere Idee ^^