Насколько опасно использовать Flexbox при реализации слайдера?

Question

[Владимир]

Сделал очередной велосипед/слайдер.
https://codepen.io/casufi/pen/mONWry
1) Насколько опасно использовать flex в том виде как в слайдере (микс инлайн блоков и блоков с абсолютным позиционированием)
2) Для анимации смены порядка флекс элементов использовал GreenSock animation, на сайте они пишут что она blazing fast, по факту в этом слайдере и правда достаточно быстрая. Если кто работал с этой библиотекой, насколько она проблемная, насколько оправдано ее применение ?

Comments

[Евгений Вольф]

Выглядит классно, не считая возможности утаскивать средний элемент за экран :))

А что в целом может быть опасного во flex'ах, кроме отсутствия их поддержки старыми браузерами, на Ваш взгляд?

[Владимир]

Евгений Вольф:
1) Это черновик, пруф оф концепт, в рабочем нет смены слайдов по простому клику, нельзя утянуть
2) На счет старых браузеров я не опасаюсь, флексы держит больше браузеров чем бордер радиус caniuse.com/#search=flex
Я беспокоюсь о связке элементов с абсолютным позиционированием и инлайн во флекс блоке. Не могу проверить как поведет себя 11 ослик например, или мобильный сафари, и как это дело адаптировать под них если будет косяк.

[Владимир]

Евгений Вольф: Ну и сам GreenSock для меня темная лошадка

[Евгений Вольф]

Владимир: под IE-11 работает, видимо, не совсем так как ожидалось... Вот небольшой скрин-каст.

[Владимир]

Евгений Вольф: Хых

[Ярослав Иванов]

Владимир: Эх, codepen сломался? любопытно стало. Хочу посмотреть))

[Максим Тимофеев]

На счет старых браузеров я не опасаюсь, флексы держит больше браузеров чем бордер радиус

В отличии от border-radius, отсутствие поддержки flex сломает верстку. Так что аналогия не уместна. Но наверное уже пора делать на flex и кроме самого флекса, других проблем в этом слайдере я не вижу.

[Владимир]

Ярослав Иванов: Toster эфект ? Первый раз такое вижу на codepen.

[Антон Мудренок]

Владимир: такое бывает иногда, рассылка пришла)

Answer 1

[Антон Мудренок]

Насколько опасно использовать flex в том виде как в слайдере

Зависит где вы ждете эту опасность. Если в тормознутости анимации, то не очень опасно. Первый кадр можеть быть слегка с замедлением, т.к. идет render элемента, потом все плавно и никакого пересчета свойств не происходит, как если бы вы использовали не translate, а например left.
Для наглядности покажу тут: codepen.io/just-a-training/pen/WRrvJr?editors=0010
Увидеть, что все без проблем, можно на чистой timeline:

~

на сайте они пишут что она blazing fast, по факту в этом слайдере и правда достаточно быстрая

Она одна из самых быстрых, если не самая. Но вы в слайдере начудили, поскольку во время анимации объектов, изменяете Layout и потому происходят провисания до 30fps.

~

Если кто работал с этой библиотекой, насколько она проблемная, насколько оправдано ее применение

Вообще с ней никаких проблем, кроме того, что она платная. И что она немного навязывает свой ооп-шный стиль, хотя это 50/50 проблема, работаем то с объектами. Я перед тем как начать ей пользоваться, немного руцями пописал, приятного мало =)
Можете тут глянуть на обсчеты свойств руцями: https://codepen.io/mudrenok/pen/GjaJJj?editors=0010

Comments

[Владимир]

Подскажите, "оскольку во время анимации объектов, изменяете Layout," ? По идее я сменил порядок элементов в боксе и только потом запускаю анимацию.

[Антон Мудренок]

Владимир: я не вникал в код, но чисто теоретически, такое может быть из за элемента который "летит обратно", т.к. если включить Paint Flashing в Rendering, можно увидеть, что вся страница зеленая в момент когда мышку после драга опускаем. Там вы что-то трогаете, что пересчитывает стили. А еще у вас баг в том, что если сразу начать кликать, то анимации не происходит.

[Антон Мудренок]

Владимир: вот тут возможно x: element.offsetLeft, но это надо играться. Или с timeline переходить по фунцкиям, которые были вызваны перед пролагом.

[Владимир]

Антон Мудренок: Спасибо

[Владимир]

Антон Мудренок: Кстати про платность, библиотека платная только если ты продаешь шаблон с ее использованием нескольким заказчикам или твой сайт подразумевает подписку. Если ты продаешь разовый проект одному заказчику - платить не нужно. Я правда не понял, что если заказчик собирается открывать подписку на сайте, который ты для него сделал.

[Антон Мудренок]

Владимир: так то оно так, я сильно не вникал во всю специфику их лицензии. Но зато точно знаю, что некоторые плагины без подписки просто не работают(codepen не в счет) и на выходе редиректят на страну с "заплати".

[Антон Мудренок]

Владимир: кстати на codepen есть в Change View опция Open on CrossBrowserTesting. Нашарик можно тестировать под любые браузеры.

[Владимир]

Я использовал CustomEase он требует только наличие пользователя на сайте, никаких денег не надо.

[Антон Мудренок]

Владимир: может он и не требует платой подписки, попробуйте MorphSVG

[Владимир]

Антон Мудренок: Согласен, но такой функционал или самому делать или не грех заплатить.