Можно ли ограничить ширину текста, шириной картинки?

1. ОГРООООООООООООООООООООООООООмноЕ спасибо!
2. Можешь объяснить с точки зрения логики как работает ЭТО? - findle попробовал удалять свойства у класса а .text - разваливается. Принцип работы интересен

Можно ли ограничить ширину текста, шириной картинки?

Что-то то нет...

Интересует мнение об онлайн школе Скиллбокс?

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

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

Skandiy, Если бы ООП был, то большинство фреймворков JS и библиотек были нафиг не нужны

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

А сейчас там больше ничего и нет... Чем в указанном выше сайте.

Вот еще:
https://developer.mozilla.org/ru/docs/Web/JavaScri...

А остальное, тебе будут просто воду гнать на курсах.
Вот один из комментаторов, вселил надежду: "уже есть https://youtu.be/hoKKYKMadQs?t=2899"

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

Алекс Глебов, вообще есть у меня одна безумная теория:
Если все кто связан с web-разработкой удалят со своих машин ie. Его статистика использования будет равна НУЛЮ. И жить станет всем легче

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

Спасибо. Я за за сегодня много узнал благодаря Вам.
Дальше данный вопрос перекатился в другой, может будет интересен:
Правильно ли использован requestAnimationFrame?

Есть нормальная книга/курс или видеоуроки по ООП в 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 - же для читабельности добавили?