как применить разные анимации на один элемент при нажатии кнопки

184

15 апреля 2019, 03:40

я попыталась это сделать, но получается что когда нажимаю, элемент исчезает, потом только при повторном нажатии кнопки появляется и анимируется.

попробуйте сами:

$('button:nth-child(1)').on('click', function() { 
  $('h1').addClass('activate bounce').toggle() 
 
}) 
 
$('button:nth-child(2)').on('click', function() { 
  $('h1').addClass('activate bounce').toggle() 
 
}) 
 
$('button:nth-child(3)').on('click', function() { 
  $('h1').addClass('activate rubberBand').toggle() 
 
}) 
 
 
//может это из-за togggle()?

@keyframes bounce { 
  from, 
  20%, 
  53%, 
  80%, 
  to { 
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
    transform: translate3d(0, 0, 0); 
  } 
  40%, 
  43% { 
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 
    transform: translate3d(0, -30px, 0); 
  } 
  70% { 
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 
    transform: translate3d(0, -15px, 0); 
  } 
  90% { 
    transform: translate3d(0, -4px, 0); 
  } 
} 
 
@keyframes rubberBand { 
  from { 
    transform: scale3d(1, 1, 1); 
  } 
  30% { 
    transform: scale3d(1.25, 0.75, 1); 
  } 
  40% { 
    transform: scale3d(0.75, 1.25, 1); 
  } 
  50% { 
    transform: scale3d(1.15, 0.85, 1); 
  } 
  65% { 
    transform: scale3d(0.95, 1.05, 1); 
  } 
  75% { 
    transform: scale3d(1.05, 0.95, 1); 
  } 
  to { 
    transform: scale3d(1, 1, 1); 
  } 
} 
 
.activate { 
  animation-duration: 1s; 
  animation-fill-mode: both; 
} 
 
.bounce { 
  animation-name: bounce; 
  transform-origin: center bottom; 
} 
 
.rubberBand { 
  animation-name: rubberBand; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h1>lorem</h1> 
 
<div class="buttons"> 
  <button>animate1</button> 
  <button>animate2</button> 
  <button>animate3</button> 
  <button>nfdf</button> 
  <button>nfjnwkrnw</button> 
  <button>rejrnwnr</button> 
  <button>jenrw</button> 
  <button>ernkw</button> 
 
</div>

как это предотвратить?

p.s. красивые анимации взяты отсюда

Answer 1

Сделал на примере сайта

Добавляем класс и через setTimeout удаляем его через n кол-во времени(Задержка в миллисекундах, 1000 миллисекунд равны 1 секунде.)

$('button:nth-child(1)').on('click', function() { 
  $('h1').addClass('activate bounce'); 
  setTimeout(function(){$('h1').removeClass('activate bounce');},1000); 
 
}) 
 
$('button:nth-child(2)').on('click', function() { 
  $('h1').addClass('activate bounce'); 
  setTimeout(function(){$('h1').removeClass('activate bounce');},1000); 
 
}) 
 
$('button:nth-child(3)').on('click', function() { 
  $('h1').addClass('activate rubberBand'); 
  setTimeout(function(){$('h1').removeClass('activate rubberBand');},1000); 
 
}) 
 
 
//может это из-за togggle()?

@keyframes bounce { 
  from, 
  20%, 
  53%, 
  80%, 
  to { 
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
    transform: translate3d(0, 0, 0); 
  } 
  40%, 
  43% { 
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 
    transform: translate3d(0, -30px, 0); 
  } 
  70% { 
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 
    transform: translate3d(0, -15px, 0); 
  } 
  90% { 
    transform: translate3d(0, -4px, 0); 
  } 
} 
 
@keyframes rubberBand { 
  from { 
    transform: scale3d(1, 1, 1); 
  } 
  30% { 
    transform: scale3d(1.25, 0.75, 1); 
  } 
  40% { 
    transform: scale3d(0.75, 1.25, 1); 
  } 
  50% { 
    transform: scale3d(1.15, 0.85, 1); 
  } 
  65% { 
    transform: scale3d(0.95, 1.05, 1); 
  } 
  75% { 
    transform: scale3d(1.05, 0.95, 1); 
  } 
  to { 
    transform: scale3d(1, 1, 1); 
  } 
} 
 
.activate { 
  animation-duration: 1s; 
  animation-fill-mode: both; 
} 
 
.bounce { 
  animation-name: bounce; 
  transform-origin: center bottom; 
} 
 
.rubberBand { 
  animation-name: rubberBand; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h1>lorem</h1> 
 
<div class="buttons"> 
  <button>animate1</button> 
  <button>animate2</button> 
  <button>animate3</button> 
  <button>nfdf</button> 
  <button>nfjnwkrnw</button> 
  <button>rejrnwnr</button> 
  <button>jenrw</button> 
  <button>ernkw</button> 
 
</div>

Answer 2

В место

$('h1').toggle();

используй

$('h1').toggleClass();

.toggle() предназначен для другого. Добавляет style="display: none;"

$('button:nth-child(1)').on('click', function() { 
  $('h1').toggleClass('activate bounce'); 
})

@keyframes bounce { 
  from, 
  20%, 
  53%, 
  80%, 
  to { 
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
    transform: translate3d(0, 0, 0); 
  } 
  40%, 
  43% { 
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 
    transform: translate3d(0, -30px, 0); 
  } 
  70% { 
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 
    transform: translate3d(0, -15px, 0); 
  } 
  90% { 
    transform: translate3d(0, -4px, 0); 
  } 
} 
 
@keyframes rubberBand { 
  from { 
    transform: scale3d(1, 1, 1); 
  } 
  30% { 
    transform: scale3d(1.25, 0.75, 1); 
  } 
  40% { 
    transform: scale3d(0.75, 1.25, 1); 
  } 
  50% { 
    transform: scale3d(1.15, 0.85, 1); 
  } 
  65% { 
    transform: scale3d(0.95, 1.05, 1); 
  } 
  75% { 
    transform: scale3d(1.05, 0.95, 1); 
  } 
  to { 
    transform: scale3d(1, 1, 1); 
  } 
} 
 
.activate { 
  animation-duration: 1s; 
  animation-fill-mode: both; 
} 
 
.bounce { 
  animation-name: bounce; 
  transform-origin: center bottom; 
} 
 
.rubberBand { 
  animation-name: rubberBand; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<h1>lorem</h1> 
 
<div class="buttons"> 
  <button>animate1</button> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

owl-carousel показать сразу конец списка

Есть плагин owl-carousel, с помощью него выводим слайды, и возможность листать влево / вправо

220

Timer и захват AsyncLocals (ExecutionContext)

На гитхабе в тикетах для corefx и aspnet много обсуждений на тему захвата AsyncLocal при создании таймера

207

Поиск пути к контроллеру ASP.NET Web Api на Apache

Создал приложение ASPNET Web Api для парсинга входящих данных, их обработки, фильтрации, и отправки их на другой сервер

176

Отключение триггера при прыжке

В общем, 4 удара работают последовательно по тригеру, но когда идет анимация прыжка и активируется триггер, при приземлении моментально воспроизводится...

161