Анимация множества кнопок
Здраствуйте, скажите пожалуйста какой путь правильно выбрать для анимирования нескольких кнопок одной и тойже анимацыей. Проблема в том что кнопки могут быть нажаты несколько раз и каждый раз они должны анимироватся независимо друг от друга. Во vue.js
Раньше я использовал костыль в виде присвоения класа :class="{myAnim: hasAnim}" переменной hasAnim и сбрасователя анимации vue.hasAnim = false; window.requestAnimationFrame(() => window.requestAnimationFrame(() => { vue.hasAnim =true; })) Но при таком методе прийдется предопредилить переменных в количество кнопок, и копировать window.requestAnimationFrame, существует ли способ по удобнее и по правельнее... Код <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="vue"> <button @click="anim">first</button> <button @click="anim">second</button> <button @click="anim">third</button> <button @click="anim">fouth</button> <button @click="anim">fifth</button> </div> <style> #vue{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .WrongAnim { animation: swing 0.5s linear; } @keyframes swing { 10% { transform: translateX(15%); } 20% { transform: translateX(-13.5%); } 30% { transform: translateX(12%); } 40% { transform: translateX(-10.5%); } 50% { transform: translateX(9%); } 60% { transform: translateX(-7.5%); } 70% { transform: translateX(6%); } 80% { transform: translateX(-4.5%); } 90% { transform: translateX(3%); } 100% { transform: translateX(0); } } </style> <script> var vue = new Vue({ el: '#vue', data: { }, methods: { anim() { //something here } }, }) </script> |
fori,
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="vue"> <button @click="anim">first</button> <button @click="anim">second</button> <button @click="anim">third</button> <button @click="anim">fouth</button> <button @click="anim">fifth</button> </div> <style> #vue{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .WrongAnim { animation: swing 0.5s linear; } @keyframes swing { 10% { transform: translateX(15%); } 20% { transform: translateX(-13.5%); } 30% { transform: translateX(12%); } 40% { transform: translateX(-10.5%); } 50% { transform: translateX(9%); } 60% { transform: translateX(-7.5%); } 70% { transform: translateX(6%); } 80% { transform: translateX(-4.5%); } 90% { transform: translateX(3%); } 100% { transform: translateX(0); } } </style> <script> var vue = new Vue({ el: '#vue', data: { }, methods: { anim({target}) { target.classList.remove('WrongAnim'); document.documentElement.clientHeight; target.classList.add('WrongAnim'); } }, }) </script> |
Часовой пояс GMT +3, время: 06:31. |