Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.01.2021, 00:27
Кандидат Javascript-наук
Отправить личное сообщение для fori Посмотреть профиль Найти все сообщения от fori
 
Регистрация: 27.01.2021
Сообщений: 117

Анимация множества кнопок
Здраствуйте, скажите пожалуйста какой путь правильно выбрать для анимирования нескольких кнопок одной и тойже анимацыей. Проблема в том что кнопки могут быть нажаты несколько раз и каждый раз они должны анимироватся независимо друг от друга. Во 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>
Ответить с цитированием
  #2 (permalink)  
Старый 31.01.2021, 09:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Несколько кнопок скрыть/показать в одном js файле Fankrai Элементы интерфейса 5 01.06.2020 16:57
Как сделать, чтобы анимация числа работала не только при активном окне? Lefseq Общие вопросы Javascript 4 07.03.2020 09:53
Как реализована анимация на сайте популярной игры? whoIam Общие вопросы Javascript 6 19.09.2016 09:45
CSS3 Анимация [Не срабатывает при переключении вкладки] Quasar[CY] (X)HTML/CSS 1 18.11.2015 20:43
Анимация после анимации Narahon Элементы интерфейса 12 02.04.2015 22:06