CSS анимация не работает в присутствии JavaScript?

Question

[Иван Ефимов]

Здравствуйте.
В своём изучении процесса Web разработки добрался до динамических элементов и JavaScript. С огромным удивлением вижу, что CSS свойство transform: translate(x, y) перестаёт работать, если на странице имеется подключённый .js, в не зависимости от содержимого самого .js.
На много вопросов я нашёл ответы самостоятельно, но такого ожидать было нельзя. Помогите, а то лыжи не едут :)

Comments

[Александр Варлаков]

Код в студию!!!
Потому как в написанное не вериться.

[Иван Ефимов]

AlexandrVV86,
вот ссылка на видео на GoogleDrive
Вкратце: открываем папку, открываем редактор, открываем страницу напрямую из папки. Анимация работает. Вставляем .js - не работает. Проверяем в режиме разработчика и без него.
Код, если ещё нужен, завтра с утра.

[Александр Варлаков]

Ivan_Efimov, отправил запрос на доступ

[Александр Варлаков]

Ivan_Efimov, Из видео возникает вопрос: нафиг ты пишешь src = '.(точка)/file.js'? Точка зачем? если файлы находятся на уровень выше то две точки, если на этом просто "/". код js надо смотреть, скорее всего он что-то ломает

[Stalker_RED]

Ivan_Efimov, лучше не видео, а собрать пример в песочнице. jsfiddle, plnkr, codepen или типа того.

[Иван Ефимов]

AlexandrVV86,
обновил настройки доступа.
AlexandrVV86, "нафиг ты пишешь src = '.(точка)/file.js'?"
Это выведено чисто эмпирически. "./" позволяет прописывать относительный адрес от корня сайта (index.htm).
Её отсутствие проблему не решает. В не зависимости от того как писать путь.

[Иван Ефимов]

Stalker_RED,
ссылка с проектом: page
Лично я активно использую препроцессор SASS. Не думаю что предполагаются большие правки.

[Иван Ефимов]

AlexandrVV86, "надо смотреть, скорее всего он что-то ломает"
от содержимого js это не зависит, проверено.

[Александр Варлаков]

Иван Ефимов, ща качнем посмотрим

[Александр Варлаков]

Сейчас напишу решение, проблема не в JS

[Александр Варлаков]

Работает?

Answer 1

[Александр Варлаков]

"что CSS свойство transform: translate(x, y) перестаёт работать" - оно не перестает работать, оно уже просто отображается со сдвигом установленным тобой, без эффекта прокрутки
Все из-за строки:

let sliderWidth = window.getComputedStyle(slider).width

В котором происходит вычесление CSS
Решение:
1. Выносим трансформацию в новый класс

.scroll{
  transform: translateX(-960px);
}

2. В твой скрипт, который срабатывает на окончание документа добавляем:

js

let wrapper = document.querySelector('.wrapper');
 wrapper.classList.add('scroll');

И все..

P.S.
<div class="a21 v"> - это просто ужасно

Comments

[Иван Ефимов]

Хорошая попытка, но я уже проверял.
Что вы скажите вот на это: Видео_№2
Кратко: открываем страницу, запускаем редактор, убираем весь js-код из файла script, проверяем - не работает, убираем тег Script - работает. Ваше решение интересно, но JS код не причём, как видно.
Повторюсь: я сам офигел :) Кстати если прописать <script> без атрибутов, то эффект тот же. Я никогда ни о чем подобном нигде не слышал. Баг или фича?

p. s. "это просто ужасно" - а по моему наоборот, именно в таком виде все стало лаконично и понятно. Наверное, так мозги работают, хз :) Я знаю про БЭМ и другие "нормальные" методы именования классов и даже пытался их применять.

[Александр Варлаков]

Иван Ефимов, Не баг и не фича. Особенности работы браузеров. Допустим в firefox даже без js сразу показывает со сдвигом без анимации. chrome сдвигает. Но то что ты делаешь - изначально не правильно.
У тебя сдвиг не привязан абсолютно ни к чему, ни к какому событию. Допустим это поставить на сервер, а еще лучше на бесплатный медленный сервер - то ты так же ничего не увидишь, Потому как пока страница загрузиться, произойдет сдвиг

[Иван Ефимов]

Ок. Вопрос можно считать закрытым. Видео и материалы удалены.

[Александр Варлаков]

Иван Ефимов, Ты пытаешься почему? - это такие дебревые дебри, что туда лучше не лезть, если ты конечно, не собираешься разрабатывать свой новый браузер, допустим "Efimov browser" с абсолютного нуля.
Это особенности порядка чтения, отображения DOM, конкретным браузером. Повторюсь firefox сразу со сдвигом показывает не зависимо от того, есть ли javascript файл или нет. Хром при добавлении js-файла, тоже игнорирует св-во transition-duration: 3s; и отображает уже со сдвигом.

убери св-во overflow: hidden - чтобы в этом убедиться.

Если пробовать в других браузерах, то результат, будет тоже отличаться, как между firefox и chrome.

Если все же интересен вопрос как браузер загружает DOM (то лезь в каждую тех документацию браузера), в каком порядке и как и как влияет на это тег script

[Иван Ефимов]

"Это особенности порядка чтения, отображения DOM, конкретным браузером" - до этого я еще не добрался откуда мне это можно знать? Теперь хоть какое-то представление есть. " Ты пытаешься почему?" - я пытаюсь сделать элементарный слайдер, вижу какую-то дичь. Хочу узнать что за дичь. Оказывается не дичь, а дебри работы браузера. Я понял. Уверен, будет еще другая дичь.

[Александр Варлаков]

Иван Ефимов, много чего интересного:
- Один и тот же шрифт может отображаться по разному в браузерах
- иметь разные отступы
- начертания
- не поддерживаемые в принципе css-свойства в некоторых браузерах
- не поддерживаемые свойства и методы js или их другое название

"до этого я еще не добрался откуда мне это можно знать?" - я тебя не в чем не упрекаю. Просто сокращаю диалог до минимума. Чтобы быстрее понять, что ты хочешь.
Ладно, удачи