Анимация на базе animejs
Здравствуйте! Помогите переделать код что бы он работал как мне надо.
Есть анимация на базе animejs https://animejs.com/documentation/ Посмотрите демо: https://codepen.io/ethereal94/pen/jObVzYN Нужно немного переделать, сделать что бы анимация работала также, только во всех блоках одновременно(одинаково). Я не силен в JS, искал в документаций, но так и не смог сделать. Может кто шарит в JS сможет сделать! Спасибо! |
animejs синхронизация
ethereal,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .item { width: 300px; height: 300px; background: coral; padding: 20px; margin: 20px; float: left; } .item-inner { width: 260px; height: 260px; background: green; padding: 20px; } .item-inner span { display: block; } button { background: red; display: block; margin-left: 20px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script> <script> $(function() { $( "button" ).click(function() { var elements = []; var parent = document.querySelectorAll('.item .item-inner'); parent.forEach(div => div.querySelectorAll('span').forEach( (span, i) => elements[i] ? elements[i].push(span) : (elements[i] = [span]) )); elements.forEach((list, i) => anime.timeline({loop: false}) .add({ targets: list, translateX: [0,40], translateZ: 0, easing: "easeOutExpo", duration: 1000, delay: 100 + 300 * i }).add({ targets: list, translateX: [40,0], easing: "easeInExpo", duration: 1000, delay: 100 + 150 * i })); }); }); </script> </head> <body> <button>Click!!!</button> <div class="item"> <div class="item-inner"> <span>text 1</span> <span>text 2</span> <span>text 2</span> </div> </div> <div class="item"> <div class="item-inner"> <span>text 1</span> <span>text 2</span> <span>text 2</span> </div> </div> <div class="item"> <div class="item-inner"> <span>text 1</span> <span>text 2</span> <span>text 2</span> </div> </div> <div class="item"> <div class="item-inner"> <span>text 1</span> <span>text 2</span> <span>text 2</span> </div> </div> </body> </html> |
Спасибо большое! Не подскажешь еще как сделать что бы анимация начиналась с последнего пункта?
|
Цитата:
elements.reverse().forEach |
Часовой пояс GMT +3, время: 07:09. |