Получить расчетные свойства CSS для шаблона в Backbone.View

ли можно получить визуализации шаблон рассчитывается CSS значения без прикрепляя его к DOM?Получить расчетные свойства CSS для шаблона в Backbone.View

Меня интересует Backbone.View $ el CSS-значения и способ предварительного расчета его свойств, таких как ширина и высота, не привязывая их к DOM.

Если это не представляется возможным,

Какой самый лучший способ для расчета целевых значений за предоставленные шаблоны, таким образом они могут быть использованы с jQuery.animate?

например увядает/проявки функции, которая будет частью того, что это View расширенных методы

источник

2013-03-04 Inoperable

Вы не согласны с тем, чтобы подключить его к DOM по техническим или эстетическим соображениям? – pdoherty926

Я хочу сделать анимацию «открытия» или «закрытия», и мне нужно рассчитать целевые значения для анимации. Например, если модель изменяет свои данные, я хочу пересчитать высоту/ширину некоторых элементов и сделать анимацию при повторном рендеринге представления вместо внезапного изменения DOM. – Inoperable

Рассматривали ли вы добавление элемента в DOM с видимостью, скрытой, измеряя ее, а затем удаляя ее? – pdoherty926

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

window.getComputedStyle

Documentation (https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle)

Затем настройки методов в ваших взглядах выглядеть следующим образом:

fadeIn : function (event) { 
    var rootElement = this.$el.get(0); 
    var cssStyles = window.getComputedStyle(rootElement, null); 
    var rootElementHeight = cssStyles.getPropertyValue("height"); 
    var rootElementWidth = cssStyles.getPropertyValue("width"); 

    // perform fadeIn animation  
}, 

fadeOut : function (event) { 
    var rootElement = this.$el.get(0); 
    var cssStyles = window.getComputedStyle(rootElement, null); 
    var rootElementHeight = cssStyles.getPropertyValue("height"); 
    var rootElementWidth = cssStyles.getPropertyValue("width"); 

    // perform fadeOut animation  
},

Это не идеальный вариант, а возвращаемая высота и ширина - это только представление окончательных правил CSS, применяемых к этому элементу. Таким образом, вполне возможно, что фактическая высота и ширина изменились бы, когда элемент был фактически отображен на странице.

Надеюсь, это поможет!

источник

2013-03-11 17:37:41 shanewwarren

Это действительно хороший подход! Благодарю. – Inoperable

Получить расчетные свойства CSS для шаблона в Backbone.View

ответ

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