Есть нормальная книга/курс или видеоуроки по ООП в JS?

Алекс, посмотрев и услышав про стандарт 2020, появилась надежда, что к моей старости, им начнут пользоваться. В бэкэнде конечно раньше. А фронтэнд? А неадекватные заказчики с желанием поддержки ie?
Это то все на дальнюю, пока не понятную перспективу.
Спасибо за полезный комментарий , Алекс. Будет время изучу подробнее данный вопрос.

Правильно ли использован requestAnimationFrame?

За видео - большое спасибо

Правильно ли использован requestAnimationFrame?

Александр, я просто логики в этом не вижу, в css именно, где логика? удаляем свойство - она медленно возвращается на свою позицию, ставим 'translate(0, 100%)'; - по X встает как надо - быстро, и по Y - замедленно, но при этом свойство transition: 10s;
Вот где о таких нюансах можно узнать?

Правильно ли использован requestAnimationFrame?

Александр, спасибо. Но все равно не понимаю, почему в 0. она становиться без задержки

Правильно ли использован requestAnimationFrame?

Нецелесообразно подключать jquery, чтобы навесить через доллар - обработку кликов.
А это конструкция языка. Причем довольно емкая
Извините если задел вас своим предыдущим ответом. Вы принесли своими примерами не меньше пользы, чем другие. Благодарю вас примеры.

Слово "костыльность", "костыли" и прочее по отношению к web-разработке я вообще не переношу.
Что css(особенно до появления flex-box и grid), что js - это все костыли, костелевские.
Надеюсь к моей старости js будет доведен до ума.

Правильно ли использован requestAnimationFrame?

Ну это вообще супер - правда!
Но вы как Сергей Соколов, который отвечал выше, упустили один момент:
Меня изначально интересовал requestAnimationFrame

И еще вопрос, а почему оно так работает? Ведь не должно из-за "0" - без процента?

Правильно ли использован requestAnimationFrame?

Александр, Так мне буква ГЭ и нужна была, на js без css

Правильно ли использован requestAnimationFrame?

Тёзка, мы сейчас, с вами, ерундой страдаем:

я же писал выше, что пробовал, данный код срабатывает через раз

Правильно ли использован requestAnimationFrame?

А тут я вам посмею возразить: setTimeout сколько?
Опыт уже есть :
На локальной машине достаточно timeout - 10мс
на jsfiddle.net - 100 мс(на отдельном хостинге не проверял),10 мало - движется по диагонали.
timeout - в данной ситуации, не надежный инструмент - могут повлиять сторонние факторы такие как загруженность системы, самого браузера, параметры системы, скорость интернета. ставить большой интервал "на всякий случай" - может повлиять на конечный результат - выглядеть будет не так как хотелось бы.

Далее: чем движение вправо, а потом вниз это не кадры?

еще далее:

requestAnimationFrame(()=>{
    requestAnimationFrame(()=>{
      el.style.transition = '10s';
  		el.style.transform = 'translateY(100%)';
  })
})

этот короче чем ваш, из него лично мне только ПОКА не понятно зачем оборачивать дважды.

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

Если бы код был 100+ строк кода или больше. Запутанный непонятный, это одно. А тут коротко и понятно, единственое это мое "ПОКА" выше

Осталось только сделать тест на производительность, что быстрее работает, и насколько допустим по времени будет медленнее/быстрее работать, вышеуказанный скрипт

Правильно ли использован requestAnimationFrame?

Спасибо! Что скажете по тому, что я собрал качестве вариантов решения (см. мой ответ):
1.

el.style.transform = '';
requestAnimationFrame(()=>{
    requestAnimationFrame(()=>{
      el.style.transition = '10s';
  		el.style.transform = 'translateY(100%)';
  })
})

2.

el.style.transform = '';
getComputedStyle(el).transform;
el.style.transition = '10s';
el.style.transform = 'translateY(100%)';

Если плохо/хорошо то почему?

Правильно ли использован requestAnimationFrame?

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

Правильно ли использован requestAnimationFrame?

Вопрос скоро удалю, потому как сам нашел решение проблемы благодаря одному человеку, который скинул мне следующее видео:
https://www.youtube.com/watch?v=cCOL7MC4Pl0&t=1337s
Вся сложность до этого, была в том, что видос на английском, и вникать пришлось дольше, чем если был на русском, к указному таймингу пришел намного позже чем нашел решение сам. А правильность решения не давала мне покоя

Теперь отвечу на ваш комментарий:
видео прямо опровергает это:
- "так requestAnimationFrame просто банально для другого нужен"
- "В текущем виде rAF тут вообще не нужен, это не практика"

Поэтому извините - это лишь ваша точка зрения, обусловленная вашим опытом и мировоззрением. Не более. Опыт - вы не встречали подобного решения. Мирровозрения - решили отнести мое решение к "костылям", возможно из-за лишнего консерватизма. Я поблагодарил Сергея за этот код:

c.onclick = function(){
  el.style.transform = '';
  void el.offsetWidth;
  el.style.transition = '10s';
  el.style.transform = 'translateY(100%)';
}

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

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

Правильно ли использован requestAnimationFrame?

Сергей Соколов, Сергей, и к чему мы пришли? В данном случае ваш хак - это не костыль?
Сергей, я обязательно отмечу ваш ответ решением, потому как, что первый, что второй варианты - исключительно верны. Но Сергей вы упускаете, важную деталь:
Процитирую себя:
"Я сейчас в процессе изучения requestAnimationFrame - и меня интересует именно requestAnimationFrame."

P.S. За хак спасибо - не знал. void - же для читабельности добавили?

Правильно ли использован requestAnimationFrame?

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

el.style.transform = '';
	l.style.transition = '10s';
  	el.style.transform = 'translateY(100%)';

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

Добавление css-анимаций - это одно из правильных решений. Но не единственное.

Я сейчас в процессе изучения requestAnimationFrame - и меня интересует именно requestAnimationFrame.

Правильно ли использован requestAnimationFrame?

Егор Живагин, Чтобы получилось именно так как:


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

Как сделать правильно анимацию, в э том примере?

Александр Варлаков, Даже использование промисов не изменяет результатов:

Как сделать правильно анимацию, в э том примере?

Что-то таки нет...
Попробовал три варианта:



Что-то не получается...

Получается: либо ставит на начальную позицию, но дальше не двигает, либо двигает все также по диагонали

Как правильно спозиционировать боковое перевернутое меню?

Большое спасибо!

Как настроить прокрутку?

Вот блок contaner - 5000px
sub-container - max-width 200px, но с большим количеством текста,
родитель прокручиватся, sub-container нет. Так?

Как настроить прокрутку?

Вообще погуглить лень?
Body - это отображаемая часть html, если коротко. Куда выше крутить? К метатегам и файлам стилей?

body - Представляет тело документа (содержимое, не относящееся к метаданным документа).
html - Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.

Тег является контейнером, который заключает в себе все содержимое веб-страницы, включая теги и . Открывающий и закрывающий теги в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег идет в документе вторым, после определения типа документа (Document Type Definition, DTD), устанавливаемого через элемент . Закрывающий тег должен всегда стоять в документе последним.