Looking for a workaround trong khi tôi xem xét việc nộp một lỗi để crom -getComputedStyle và chuyển tiếp
Nếu một phần tử có một sự chuyển tiếp, getComputedStyle không trả lại những gì bạn mong chờ nó quay trở lại cho đến khi sau khi chuyển đổi kết thúc.
Dài và ngắn - nếu tôi có phần tử có chiều cao 24px và thêm lớp cho độ cao là 80px (với chuyển tiếp đến và đi) và cả chiều cao được xác định trong biểu định kiểu - nếu tôi đặt lớp đó và kiểm tra getComputedStyle, nó vẫn cho tôi chiều cao không phải lớp cho đến khi quá trình chuyển đổi kết thúc.
một mẫu của những gì tôi đang nói về ở đây:
<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>
fiddle của mẫu này ở đây: http://jsfiddle.net/bobbudd/REeBN/
(lưu ý: fiddle này chỉ được đi làm việc ở webkit, đó là một trình duyệt chúng tôi đang nhắm mục tiêu tin hay không - nhưng tôi cũng đã thử nghiệm và nhận được cùng một vấn đề trong FF)
Vấn đề là tôi có nhiều trường hợp cần biết phong cách cuối cùng (một số có thể nói là "được tính toán "style) TRƯỚC KHI transitionEnd xảy ra. Hoặc tôi đoán nó là một phần của một câu hỏi lớn hơn - với rất nhiều cách khác nhau để biết chiều cao của một phần tử vì nó ở một thời điểm cụ thể, nên getComputedStyle không nhận được bảng định kiểu (hoặc thuộc tính style) nói gì tài sản được cho là?
Và trước khi bạn hỏi tôi có thể đặt số cuối cùng trong JS, câu trả lời là (không may) không.
Ai có thể nghĩ ra cách nhận giá trị cuối cùng này trước khi quá trình chuyển đổi kết thúc?
Tôi không hiểu câu hỏi khá rõ ràng. Những gì tôi nhận được ra khỏi nó là bạn muốn một số giá trị trước khi các yếu tố thực sự được kích hoạt? – enginefree
không - phần tử đã được kích hoạt, vì vậy tôi mong đợi giá trị mới (80px), nhưng nó không mang lại cho tôi giá trị mới cho đến khi quá trình chuyển đổi kết thúc. Tôi cần một cách để có được nó ngay sau khi kích hoạt đã xảy ra, nhưng trước khi quá trình chuyển đổi kết thúc. – borbulon