Как сделать плавный показ зума (или с задержкой)?

Question

[olya_097]

если быстро наводить, то будто подлагивает тот зум(картинка в jpeg)
transition для .gallery__item:after
задан ведь

https://jsfiddle.net/pnhv48t3/

Comments

[Kizzeon]

Во первых нужно поменять top/left на transform: translate
Второй вариант менее ресурсоёмкий и более плавный

Во вторых jquery прожорливая либа(относительно чистого js или других либ для анимации аля gsap) и она может приводить к лагам. Стоит попробовать её заменить на чистый js или на более производительную альтернативу

или

вообще убрать весь js. Достаточно сделать на размер окна 4 блока со всех сторон. На какой наведено - с той стороны и идёт transform translate

[olya_097]

Kizzeon, 1) так а причем тут transform: translate
речь о иконке зума
2) у меня требование писать на jq

[Kizzeon]

olya_097, У компьютера не бесконечно ресурсов, если ты их тратишь на одно, значит их не хватает на другое.
Что бы было больше ресурсов реализовать один код нужно оптимизировать второй который идет параллельно

[Kizzeon]

Kizzeon, Ни в коде ни внешне я анимацию зума не вижу. Про что вы?
А вообще, если нужен зум то стоит настроить transform: scale

В целом все анимации следует делать либо с transform/opacity либо с либами для анимаций(gsap etc)

А jq должна пойти на покой. Лично я использую её в совсем уж крайних случаях когда надо сделать очень навороченный слайдер, и в конце вместо jq ставлю более легковесную либу с jq синтаксисом(пока на ум пришла только bliss но их очень много по типу zepto)

[olya_097]

Kizzeon, так я ж ничего не могу сделать
я ж на работе не главная)))

я про то что на 25 строке класса gallery__item:after

и даже если заменить на 30 строке
transition: 0.3s opacity, 0.3s background-color;
на transition: 0.3s all

то тут вроде ничего особо не меняется

[Kizzeon]

olya_097, Для решения задачи необходимо выполнить определенный перечень действий. Костоправ не сможет вставить кость без прикосновений к пациенту (прямых ли не прямых) так что либо вы поправляете этот код либо я безсилен

[olya_097]

Kizzeon, ну я так сделала
https://jsfiddle.net/cwbhg85f/