Нужно отсканировать значок/кнопку без jQuery UI

Question

У меня есть форма с кнопками сохранения и сброса. И у меня есть значок кнопки в верхней части формы. Я пытаюсь сделать значок кнопки нажатой, когда пользователь нажимает кнопку сохранения. Я не хочу использовать пользовательский интерфейс jQuery. Я уже попробовал, но я просто хочу использовать простой CSS и простую функцию javascript onclick, чтобы сделать эту работу.

Вот подпрыгивать CSS Я использую:

.bounce{ 
    position: relative; 
    -webkit-animation: bounce 1s 5; 
} 

@-webkit-keyframes bounce{ 
    0%{ 
     bottom:5px; 
    } 
    25%, 75%{ 
     bottom: 15px; 
    } 

    50%{ 
     bottom: 20px; 
    } 
    100%{ 
     bottom: 0; 
    } 
} 

The Css работает довольно хорошо, но, очевидно, он отскакивает, когда страница загружена, как я добавил класс = «отскока» на значок кнопки.

<button class="container-list bounce" data-toggle="modal" data-target="#container-modal"><img src="images/container-rack.png"></button> 

У меня очень длинная форма, и в конце, у меня есть кнопка контейнер следующим образом, который имеет кнопки сохранения и сброса.

<div class="container-buttons"> 
     <button class="btn btn-success" id="save_container" type="submit">Save</button> 
    <button class="btn btn-warning" type="reset">Reset</button> 
    </div> 

Итак, как я могу вызвать свойство bounce css при каждом нажатии кнопки сохранения? Пожалуйста, помогите мне. :)

Answer 1

Вы должны добавить класс, когда нажимаете кнопку. Удалив класс через 1 секунду (или, как бы длинна ваша анимация), вы можете добавить его снова с помощью той же кнопки.

Теперь, я не вижу ваш JQuery или что-нибудь, так что я просто хочу поставить некоторые общие JQuery здесь:

$('#save_container').click(function() { 
    var b = $('.container-list'); 
    b.addClass('bounce'); 
    setTimeout(function() { 
     b.removeClass('bounce');; 
    }, 1000); 
}); 

Когда #save_container нажата, .container-list получит класс .bounce и удалить он через 1 секунду (так как моя анимация в скрипке длится 1 секунду).

JSFIDDLE

Ответ 2

По предложению Энтони заначке, вы могли бы перевернуть операции вокруг и с тем, чтобы заставить его работать с каждым щелчком мыши.

Это решение может быть найдено в this fiddle и JQuery выглядит следующим образом:

$('#save_container').click(function (e) { 
    var b = $('button.container-list'); 
    b.removeClass('bounce'); 
    window.setTimeout(function() { 
     b.addClass('bounce'); 
    }, 1); 
}); 

В этом коде .bounce класс получает удаляется и 1мс после этого он получает снова добавляют.Во втором скрипте $('.container-list') содержит button, но это только потому, что HTML немного отличается.

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

Кредит для ответа 2 идет на @AnthonyGrist!

Answer 2

Удалите .button класс из элемента и добавить его, когда пользователь нажимает на кнопку:

var button = document.querySelector("button"); 
 
button.onclick = function() { 
 
    var secondButton = document.querySelector("#second-button"); 
 
    secondButton.classList.remove("bounce"); 
 
    secondButton.offsetWidth = secondButton .offsetWidth; 
 
    secondButton.classList.add("bounce"); 
 
};

.bounce { 
 
    position: relative; 
 
    -webkit-animation: bounce 1s 5; 
 
} 
 
@-webkit-keyframes bounce { 
 
    0% { 
 
    bottom: 5px; 
 
    } 
 
    25%, 
 
    75% { 
 
    bottom: 15px; 
 
    } 
 
    50% { 
 
    bottom: 20px; 
 
    } 
 
    100% { 
 
    bottom: 0; 
 
    } 
 
}

<button>Click Me!</button> 
 
<button id="second-button">Now Click Me!</button>

Вы заметите, что при нажатии на кнопку более как только анимация не будет повторяться. Чтобы обойти эту проблему, используйте один из методов в этом article:

var button = document.querySelector("button"); 
var secondButton = document.querySelector("#second-button") 
button.onclick = function() { 
    secondButton.classList.remove("bounce"); 
    secondButton.offsetWidth = secondButton .offsetWidth; 
    secondButton.classList.add("bounce"); 
} 

Я обновил фрагмент кода.