getComputedStyle e transizioni

cerca di una soluzione, mentre io considero presentando un bug a cromo -getComputedStyle e transizioni

Se un elemento ha una transizione, getComputedStyle non restituisce quello che ci si aspetta per tornare fino a dopo la transizione è finita.

Lungo e breve - se ho un elemento con un'altezza di 24px e l'aggiunta di una classe gli dà un'altezza di 80 px (con una transizione verso e da), ed entrambe le altezze sono definite nel foglio di stile - se imposto quella classe e controlla getComputedStyle, mi dà comunque l'altezza non di classe fino alla fine della transizione.

un esempio di che cosa sto parlando qui:

<html> 
    <head> 
     <style> 
      #foo { 
       display: inline-block; 
       background-color: red; 
       height: 24px; 
       padding: 4px 0; 
       width: 200px; 
       -webkit-transition-property: height; 
       -webkit-transition-timing-function: linear; 
       -webkit-transition-duration: 300ms; 
      } 
      #foo.changed { 
       height: 80px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="foo"></div> 
     <p>before: <span id="before"></span></p> 
     <p>after: <span id="after"></span></p> 
     <script type="text/javascript"> 
      var foo 
      function checkFoo(e) { 
       foo.classList.toggle('changed'); 
       document.getElementById('before').innerText = window.getComputedStyle(foo, null).getPropertyValue("height"); 
      }; 

      window.addEventListener('load', function() { 
       foo = document.getElementById('foo'); 

       foo.addEventListener('webkitTransitionEnd', function(e){ 
       document.getElementById('after').innerText = window.getComputedStyle(foo, null).getPropertyValue("height"); 
       }); 

       foo.addEventListener('click', checkFoo, false); 
      }); 
     </script> 
    </body> 
</html>

violino di questo campione qui: http://jsfiddle.net/bobbudd/REeBN/

(nota: questo violino è solo andare a lavorare in WebKit, è quello del browser ci siamo persuasi a crederci o meno - ma ho anche testato e ottenuto lo stesso problema in FF)

Il problema è che ho più casi in cui ho bisogno di conoscere lo stile finale (alcuni potrebbero dire "calcolato" "stile) PRIMA che lo transitionEnd si verifichi.

Oppure credo che sia parte di una domanda più ampia - con così tanti modi diversi di conoscere l'altezza di un elemento così come lo è in un momento specifico nel tempo, dovrebbe getComputedStyle non ottenere ciò che il foglio di stile (o attributo di stile) dice la proprietà dovrebbe essere?

E prima che tu chieda se posso inserire il numero finale nel JS, la risposta è (sfortunatamente) no.

Qualcuno può pensare a un modo per ottenere questo valore finale prima della fine della transizione?

fonte

2012-12-01 borbulon

Non capisco la domanda abbastanza chiaramente. Quello che ne ricavo è che vuoi alcuni valori prima che l'elemento sia effettivamente attivato? – enginefree

no - l'elemento è già stato attivato, quindi mi aspetto il nuovo valore (80px), ma non mi dà quel nuovo valore finché la transizione non è terminata. Ho bisogno di un modo per ottenerlo non appena è avvenuto il trigger, ma prima che la transizione sia terminata. – borbulon

Questo non è un bug. getComputedStyle è pensato per restituire il valore reso client di un attributo nel momento in cui lo si invoca. Se lo invochi durante la transizione otterrai il valore durante la transizione, come illustrato qui: http://jsfiddle.net/REeBN/1/

Il modo in cui è possibile ottenere i valori finali come impostato da una regola è esaminando la regola stessa, probabilmente tramite l'uso di cssRules.

Ecco un'implementazione utilizzando window.getMatchedCSSRules:

cssRules = window.getMatchedCSSRules(this); 
var finalCssRule = ""; 
for(var i = 0; i < cssRules.length; i++){ 
    if(cssRules[i].selectorText == "#foo.changed"){ 
     finalCssRule = cssRules[i]; 
    } 
} 
document.getElementById('final').innerText = finalCssRule.cssText;

Ecco una dimostrazione: http://jsfiddle.net/REeBN/2/

fonte

2012-12-01 15:59:40

Questo è quello che mi preoccupava. Questo è per un framework di app, quindi ottenere le cssRules per un'app specifica potrebbe rivelarsi più lungo di un processo di quanto valga la pena. Grazie per aver risposto. – borbulon

@el_bob Ho aggiunto un esempio di come è possibile recuperare anche la regola appropriata. –

Sì, l'ho visto - grazie. Dato che stiamo solo costruendo il framework e non le app, è come se dovessimo assegnare a tutti i selettori di 'getMatchedCSSRule' per vedere quale useremo. Ancora una volta, ho preso in considerazione questo e l'ho gettato via come non ottimale.Sarebbe bello avere un modo per dire direttamente quale elemento dovrebbe avere l'aspetto _A_ con i suoi attuali selettori senza dover analizzare alcuna informazione. – borbulon

risposta

Problemi correlati