Действие при изменении стиля
 

Есть код:

window.onresize = function(event) {
	$('h2.trigger').toggleClass('active').siblings("div:visible").slideUp('slow'); // при клике раскрываем блок и закрываем другие видимые блоки
	$('h2.trigger').siblings('h2').removeClass('active'); // удаляем класс .active у родственных блоков
	return false; // возвращаем false для запрета перехода по ссылке
}

window.onresize = function(event) - функция будет работать при изменении ширины экрана. А вот как мне сделать, чтобы функция работала если в div блоке slick-track изменяется стиль

opacity: 1; width: 20000px; transform: translate3d(-1746px, 0px, 0px);

- это как пример, постоянно меняется translate3d

Буду очень благодарен, нигде информации об переменных при смене стиля найти не могу :(

Реализовал при помощи:

$('.bintarif').mouseleave(function() {

Но все равно желательно изменить так, как требовалось изначально. А то на мобильные необходимо кликать по блоку, чтоб сработало :(

И кто/что меняет стиль? Там и вызывайте функцию.

Например:

$('.slick-track').onrestyle

Но так не работает

А что есть событие или метод onrestyle? Что изменяет этот стиль?
Теперь можно отследить события CSS анимаций, их можно задействовать.

То ли вы меня специально тролите, то ли вопрос не понимаете. "onrestyle? Что изменяет этот стиль?" - в том то и дело, что ничего, если бы я знал, что способно определить изменения стиля, то я бы не задавал вопрос. Вопрос же именно в этом - Что отвечает за изменение стиля

Я для этого и привел пример, что window.onresize - определяет, были ли изменения в размерах окнах и если были - тогда исполняет функцию.

Мне же нужно: определить, были ли изменения в стиле блока slick-track и если были - то произвести функцию.

Я же изначально так и написал...

Ещё раз: стиль у блока задается произвольно, он зависит от других параметров, других скриптов, мне нужно только определить, были эти изменения или нет - не важно какие изменения (хотя и пример уже дал).

Здрастье, приехали. Кто же вам тогда ответит, чего надо?

Если вот это window.onresize = function(event) { ... изменит на вызов именованной функции, то ее можно будет вызывать из чего угодно. Допустим, пусть имя функции этой "a". То есть в событии изменения окна вызывается она. Еще "хочется", чтобы при изменении некоего стиля также вызывать ее. Но сам то стиль по своему хотению не изменится, ищите по своему CSS, например, в каком классе это объявление, или может это скриптом, значит искать в скрипте.
Если это в каком-то классе, и его добавление в каком-то скрипте, значит в нем и вызвать функцию "a".

Либо устанавливать обработчик на эту анимацию и выполнять эту функцию. НО это должно быть реально на странице, а не "я хочу, но я фиг его знает где это и что". Я тем более не знаю, где и что у вас.

Может попробовать window.requestAnimationFrame задействовать.

Это могут быть чужой CSS и чужие минимизированные скрипты.

И что, в отладчике то все они прекрасно видны.

Нет гарантии, что удастся пройти по всем веткам кода, где есть
element.style.xxx = 'yyy'

voraa,
ну в общем-то в отладчике можно просмотреть и все события у элементов (ну или почти все, в FF это сразу видно), а визуально видя, какой элемент такой стиль получает, можно его выделить и узнать все, включая и тех кто что-то изменил.
У меня просто сложилось впечатление, что вообще неизвестно есть ли такое на странице, ибо спрашиваю что и где, а в ответ ....

У меня сложилось впечатление, что есть страница, сделанная кем-то, css и скрипты, написанные кем-то, и надо просто дополнительно что то сделать с элементом(тами), когда по какой то причине меняется их размер.
resizeObserver не повесить, т.к. размер (видимый) меняется и при трансформации, а он на это не реагирует.

Согласен, может быть и так, но тогда так и нужно было ответить, а то "часть кода есть, вот тут знаю, а далее черная дыра".

Раз написал: Два написал: Даже пояснил: Ещё раз объяснил вопрос: Вы же отвечаете зачем-то про окно и анимацию...

Ещё один гений, просто гений, вопрос вообще не про окна. Это пример того, как простой строчкой учитываются изменения.

Я не знаю уже как объяснять, то ли я не по русски пишу, то ли читать не умеете...

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

Соответственно скрипт должен выглядеть так:

Узнать, произошли ли перемены в блоке 1, если да - то: {
закрытие акардиона (скрипт есть)
}

Пример окна был дан именно для этого, что является переменной "изменение есть - тогда так", мне же нужно просто понять, были перемены в стиле блока или нет.

А вам, гению, ну вроде бы уже говорили о других возможностях, как то отследить анимацию, уж коли о ней речь была, собственно вы можно следить и за изменениями на странице, это MutationObserver.

Изначально даже указал, какой стиль в основном меняется

transform: translate3d(-1746px, 0px, 0px);

Он может стать с -1746px и -1747px и 46px - по этому фиксированные данные не подходят, нужно просто "стиль изменился" и каждый раз при изменении, чтоб новый скрипт срабатывал

Diox,
я ведь не спорю, что не меняется, и вам говорили, что можно и отследить. В то же время, ведь сам то по себе он не изменится, есть то, что инициализирует это, а значит там и можно что-то выполнить. Но коли это никак по каким-то причинам, следите за изменением узла посредством MutationObserver и выполняйте в этом событии.

Запоминаете, какие из интересующих вас стилей были у elem

const teststyle = () => {
// Тут проверяем не изменились ли стили у elem,
// Если изменились, делаем то, что нужно
// И перезапоминаем изменения
window.requestAnimationFrame (teststyle)
}
teststyle();

Вас любой стиль интересует?
Тогда только MutationObserver

Кстати, еще и class могут поменять

Круто, спасибо, но только там, где вы указаны "Тут проверяем не изменились ли стили у elem," - я как бы и ищу скрипт, как бы проверить, изменились они или нет )

Я вроде как нашел решение, но пока почему-то опять не работает:

selements = $('.btarifs .slick-track');
stranss = selements.css('transform');

window.Touchleave = function(event) {
qelementq = $('.btarifs .slick-track');
qtransq = qelementq.css('transform');
if(stranss==qelementq) {} else {}
}

Запомнить изначальные данные - selements.css('transform') и при убирании пальца с тача, если данные не равны, произвести изменения, но скрипт наверное не правильно составил, не работает :(

По идеи так:

selements = $('.btarifs .slick-track');
strans = selements.css('transform');

window.addEventListener('load', function(){
    document.body.addEventListener('touchend', function(e){
qelementq = $('.btarifs .slick-track');
qtranq = qelementq.css('transform');
if(strans==qtranq) {alert(1);} else {alert(2);}
    }, false)
}, false)

Но if работать не хочет :(

Всё, сделал, может кому-то пригодится на будущее:

window.addEventListener('touchstart', function(){
selements = $('.btarifs .slick-track');
strans = selements.css('transform');
    document.body.addEventListener('touchend', function(e){
qelementq = $('.btarifs .slick-track');
qtranq = qelementq.css('transform');
if(strans==qtranq) {} else {
	$('h2.trigger').toggleClass('active').siblings("div:visible").slideUp('slow');
	$('h2.trigger').siblings('h2').removeClass('active');
	return false;
}
    })
})

Запоминаем данные при возникновении касания к элементу.
Запоминаем новые данные после разрыва прикосновения к элементу.
Сравниваем значения, если они равны - ничего не делаем, если не равны - производим функцию.