getComputedStyle i przejścia

Patrząc na obejście podczas I rozważyć złożenie błąd chrom -getComputedStyle i przejścia

Jeśli element ma przejścia, getComputedStyle nie zwraca czego można się spodziewać, że do powrotu do momentu przejścia na drugą.

Długie i krótkie - jeśli mam element o wysokości 24 pikseli, a dodanie klasy daje jej wysokość 80 pikseli (z przejściem do iz), a obie wysokości są zdefiniowane w arkuszu stylów - jeśli ustawię tej klasy i sprawdź getComputedStyle, nadal daje mi wysokość nie-klasową, dopóki przejście się nie zakończy.

próbka tego, co mówię tutaj:

<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>

skrzypce tej próbki tutaj: http://jsfiddle.net/bobbudd/REeBN/

(uwaga: ta skrzypce będzie tylko do pracy w WebKit, to jest to jeden przeglądarki celujemy w to, czy nie, ale przetestowałem i dostałem ten sam problem w FF)

Problem polega na tym, że mam wiele przypadków, w których muszę znać ostateczny styl (niektórzy mogą powiedzieć, że "obliczono "styl) PRZED wydaniem transitionEnd.

Lub myślę, że jest to część większego pytania - z tak wieloma różnymi sposobami na poznanie wysokości elementu w danym momencie, powinien on uzyskaćComputedStyle nie dostać tego, co arkusz stylów (lub atrybut stylu) mówi Właściwość powinna być?

Zanim zapytam, czy mogę umieścić ostatni numer w JS, odpowiedź brzmi (niestety) nie.

Czy ktokolwiek może wymyślić sposób uzyskania tej wartości końcowej przed końcem okresu przejściowego?

Źródło

2012-12-01 borbulon

Nie rozumiem pytanie dość wyraźnie. Co mam z tego zrobić, to że chcesz niektóre wartości, zanim element zostanie rzeczywiście wyzwolony? – enginefree

no - element został już wyzwolony, więc oczekuję nowej wartości (80px), ale nie daje mi tej nowej wartości, dopóki przejście się nie skończy. Potrzebuję sposobu, aby go uzyskać, jak tylko wyzwalacz się wydarzy, ale zanim przejście się zakończy. – borbulon

To wcale nie jest błąd. getComputedStyle służy do zwracania wartości atrybutu renderowanego przez klienta w momencie jej wywoływania. Jeśli wywołasz go podczas przejścia, otrzymasz wartość podczas przejścia, jak pokazano tutaj:

Sposób, w jaki można uzyskać ostateczne wartości ustawione przez regułę, polega na zbadaniu samej reguły, prawdopodobnie poprzez użycie cssRules.

Oto implementacja przy użyciu 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;

Oto demonstracji: http://jsfiddle.net/REeBN/2/

Źródło

2012-12-01 15:59:40

Tego się obawiałem. To jest dla struktury aplikacji, więc uzyskanie cssRules dla konkretnej aplikacji może okazać się procesem dłuższym niż to jest tego warte. Dzięki za odpowiedź. – borbulon

@el_bob Dodałem przykład, w jaki sposób można pobrać odpowiednią regułę. –

Tak, widziałem to - dzięki. Ponieważ budujemy tylko framework, a nie aplikacje, to wygląda na to, że będziemy musieli zdobyć wszystkie selektory 'getMatchedCSSRule', aby zobaczyć, z którego będziemy korzystać. Znów rozważałem to i odrzucałem jako nieoptymalne.Byłoby miło mieć sposób bezpośredniego poinformowania, który element _A_ powinien wyglądać z obecnymi selektorami bez konieczności analizowania jakichkolwiek informacji. – borbulon

getComputedStyle i przejścia

Odpowiedz

Powiązane problemy