2

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

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

$('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. красивые анимации взяты отсюда

6
  • .toggle - Показывает или скрывает элементы в наборе объекта jQuery. Вам нужно сначала очистить класс, а затем добавить нужный класс с анимацией
    – nicolaa
    13 ноя 2018 в 10:42
  • а как очистить класс? можно пример, пожалуйста
    – valeria
    13 ноя 2018 в 10:51
  • $('h1').removeClass(); - Вызов removeClass без параметров приведет к удалению всех классов элементов.
    – nicolaa
    13 ноя 2018 в 10:53
  • сработало, благодарю!:)
    – valeria
    13 ноя 2018 в 10:54
  • ой, нет, что-то не так.. стиль прописанный для H1 тоже, кажется, удаляется:(( что делать?
    – valeria
    13 ноя 2018 в 11:01

2 ответа 2

3

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

Добавляем класс и через 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>

3

В место

$('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>

1
  • оо спасибо, заработало! а как сделать так чтобы анимировалось при первом нажатии? тут происходит только со второго и еще почему то не работают как следует если добавить еще пару других работающих кнопок
    – valeria
    13 ноя 2018 в 10:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.