jQuery: неправильные значения при чтении свойств CSS после удаления преобразований

Я работаю над проектом, который использует переходы и анимацию CSS3, и некоторое время мне нужно обязательно измерять неизвращенные значения свойств CSS, даже если применяются преобразования ,jQuery: неправильные значения при чтении свойств CSS после удаления преобразований

Для этого I:

временно резервного копирования и удаления преобразования
свойства чтения мне нужно
восстановить предыдущие преобразования

Делая это, я нашел странное поведение: я получить правильные значения только пошаговый шаг с отладчиком.

Я знаю о свойствах браузера, участвующих в чтении/записи, и по этой причине я поместил offsetTop свойство считывания после настройки/восстановления преобразований, но не повезло.

Примечание: это поведение похоже на кросс-браузерный консистент.

Это минимальная установка для тестирования

$(document).ready(function() { 
 
    jQuery.fn.extend({ 
 
    setupIdentity: function() { 
 
     var restore_props = [], 
 
     i; 
 
     for (i = 0; i < this.length; ++i) { 
 
     restore_props.push({ 
 
      "animation-play-state": this[i].style.animationPlayState, 
 
      transform: this[i].style.transform, 
 
      display: this[i].style.display 
 
     }); 
 
     } 
 

 
     var identity_props = { 
 
     "animation-play-state": "paused", 
 
     transform: "none", 
 
     display: "" 
 
     }; 
 
     this.css(identity_props); 
 

 
     for (i = 0; i < this.length; ++i) 
 
     var top = this[i].offsetTop; 
 

 
     return restore_props; 
 
    }, 
 

 
    restoreIdentity: function(restore_props) { 
 
     for (var i = 0; i < this.length; ++i) { 
 
     this.eq(i).css(restore_props[i]); 
 
     var top = this[i].offsetTop; 
 
     } 
 

 
     return this; 
 
    } 
 
    }); 
 

 
    $("#toggle").on("click", function() { 
 
    var wrap = $("#win_wrap"), 
 
     win = $("#win"); 
 
    if (wrap.hasClass("iconized")) { 
 
     var restore = wrap.setupIdentity(); 
 
     var restore2 = win.setupIdentity(); 
 

 
     var win_width = win.width(), 
 
     win_height = win.height(); 
 
     var win_offset = win.offset(); 
 
     console.log(win_width, win_height); 
 
     console.log(win_offset); 
 

 
     win.css(win_offset); 
 

 
     win.restoreIdentity(restore2); 
 
     wrap.restoreIdentity(restore); 
 
    } 
 

 
    wrap.toggleClass("iconized"); 
 
    }); 
 

 
    console.log($("#win").width(), $("#win").height()); 
 
    console.log($("#win").offset()); 
 
});

.window { 
 
    background: #DDD; 
 
    background-size: contain; 
 
    color: #000; 
 
    position: absolute; 
 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4); 
 
    outline: none; 
 
    z-index: 100; 
 
    box-sizing: border-box; 
 
    border-radius: 0.5em; 
 
    padding: 1em; 
 
    text-align: center; 
 
} 
 
.wwindow.trs-iconizable { 
 
    transition-property: opacity, transform; 
 
    transition-duration: 1s; 
 
    transform-origin: top right; 
 
    opacity: 1.0; 
 
    transform: scale(1.0); 
 
} 
 
.wwindow.trs-iconizable.iconized { 
 
    opacity: 0.0; 
 
    transform: scale(0.0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <button id="toggle">Show/Hide</button> 
 
    <div id="apps_wrapper"> 
 
    <div id="win_wrap" class="wwindow trs-iconizable" style=""> 
 
     <div id="win" class="window" style="position: fixed; left: 40px; top: 40px; min-width: 15em; min-height: 5em; width: auto; height: auto;">text</div> 
 
    </div> 
 
    </div> 
 
</body>

This является тест скрипку. Чтобы проверить, не решена ли проблема, вы должны:

открыть консоль devtools.
нажмите на кнопку show/hide (шкала перехода в окно)
нажмите еще раз на show/hide и проверьте консоль.

Если вы читали одинаковые значения на всех кликов (даже если между переходом), и вы увидите окно перемещены, на том же месте каждый раз, когда вы исправили мою проблему чтения свойства.

источник

2016-11-03 Marco Sacchi

Я вижу, что ширина и высота тянут те, которые продолжают вращаться как неправильные? – Culyx

@Culyx Нет, неправильное чтение находится на 'win.offset()', но я прочитал, что у jQuery есть некоторые ошибки, связанные с элементами, преобразованными в CSS. –

Справедливо, причина, по которой я спрашивал, что элементы с размером авто для ширины/высоты дадут странные результаты и в определенных условиях – Culyx

Для справок в будущем.

Я читал об ошибке jQuery bugtracker, что в библиотеке есть некоторые ошибки, связанные с преобразованными в CSS элементами (here, here и т. Д.).

Чтобы получить согласованные результаты, я решил использовать window.getComputedStyle(), который широко поддерживается, как вы можете видеть на icanuse.com. Таким образом, я также могу избежать ясного и восстановления CSS-преобразований.

источник

2016-11-04 10:35:33

jQuery: неправильные значения при чтении свойств CSS после удаления преобразований

ответ

Смежные вопросы