const ANIMATE_TIMEOUT = 3000 200;
const button = document.getElementById("button");
button.addEventListener("click", event => {
if (!button.classList.contains("animate")) {
button.classList.add("animate");
setTimeout(() => {
button.classList.remove("animate");
}, ANIMATE_TIMEOUT);
}
});I have tried querySelectorAll
const elementsList = document.querySelectorAll("#button, #button2");
const elementsArray = [...elementsList];
button.addEventListener("click", event => {
if (!button.classList.contains("animate")) {
button.classList.add("animate");
setTimeout(() => {
button.classList.remove("animate");
}, ANIMATE_TIMEOUT);
}solution suggested here : Similar issue
and the other ones provided in the same page but ,in all of them the animation does not run at all but querySelectorAll one does not break the animation itself but only applies to the first item .Thanks in advance for your time ***Update after Zer00ne support,added: Original Document with HTML/CSS/JS
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="test sheet">
<meta name="generator" content="test content">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,700&display=swap"
rel="stylesheet">
<title>test 2 buttons</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="canonical" href="https://www.google.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<style>
body {
font-family: 'Amaranth', sans-serif;
background: url(https://images.pexels.com/photos/531602/pexels-photo-531602.jpeg) no-repeat center center fixed;
-webkit-background-size: cover;
background-size: cover;
overflow: auto;
opacity: 99%;
overflow-x: hidden;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.z {
margin-top: 60px;
padding-top: 60px;
}
h1 {
position: relative;
text-align: center;
color: #353535;
font-size: 50px;
font-family: "Cormorant Garamond", serif;
}
.frame {
width: 90%;
margin: 40px auto;
text-align: center;
}
.copy-button {
height: 25px;
display: flex;
justify-content: center;
align-items: center;
position: relative
}
:root {
/* Scale setup */
--button-height: 27;
/* in px */
--height-to-scale: 33;
/* in px */
--scale-ratio: calc(var(--height-to-scale) / var(--button-height));
/* Slide setup */
--button-height-px: 27px;
--button-vertical-padding-px: 6px;
--button-content-spacing-px: calc(var(--button-height-px) var(--button-vertical-padding-px) * 2);
--slide-step-1: calc(var(--button-height-px) * -1);
--slide-step-2: calc(var(--button-height-px) * -2);
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 33px;
}
/* Button styles */
.button {
display: flex;
justify-content: center;
align-items: start;
flex-wrap: nowrap;
height: var(--button-height-px);
padding: var(--button-vertical-padding-px) 9px;
border-style: none;
border-radius: 6px;
background-color: #f3f6f9;
color: #708ebc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12.605px;
line-height: 15px;
cursor: pointer;
transition: all 200ms;
}
.button:hover {
background-color: #e4ebf2;
color: #708ebc;
}
.button:focus {
background-color: #e4ebf2;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.7);
outline: none;
}
.button:active {
background-color: #10428f;
color: #f3f6f9;
}
.copy {
display: flex;
align-items: center;
justify-content: start;
}
.icon {
margin-right: 6px;
}
/* Align content to animate */
.button {
overflow: hidden;
}
.copied {
visibility: hidden;
margin-top: var(--button-content-spacing-px);
}
/* Animations */
.button.animate {
background-color: #10428f;
color: #b6c8eb;
box-shadow: none;
animation: scale 3s cubic-bezier(1, -0.5, 0, 1.5) forwards;
}
.animate .content {
animation: slide 3s cubic-bezier(1, -0.5, 0, 1.5) forwards;
}
.animate .copied {
visibility: visible;
}
@keyframes scale {
0% {
transform: none;
}
12.5% {
transform: none;
}
25% {
transform: scale(var(--scale-ratio));
}
37.5% {
transform: scale(var(--scale-ratio));
}
50% {
transform: none;
}
100% {
transform: none;
}
}
@keyframes slide {
0% {
transform: none;
}
12.5% {
transform: translateY(var(--slide-step-1));
}
25% {
transform: translateY(var(--slide-step-1));
}
37.5% {
transform: translateY(var(--slide-step-2));
}
87.5% {
transform: translateY(var(--slide-step-2));
}
100% {
transform: none;
}
}
body {
position: relative;
}
@media (max-width: 767px) {}
::-webkit-scrollbar {
display: none;
}
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
</style>
<div >
<button onclick="copy('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod')"
type="button" id="button" title="Copy link">
<div >
<div >
<div>
Copy Link
</div>
</div>
<div >Copied!</div>
</div>
</button>
</div>
<script>
const ANIMATE_TIMEOUT = 3000 200;
const button = document.getElementById("button");
button.addEventListener("click", event => {
if (!button.classList.contains("animate")) {
button.classList.add("animate");
setTimeout(() => {
button.classList.remove("animate");
}, ANIMATE_TIMEOUT);
}
});</script>
<script>
document.querySelectorAll('[data-bs-toggle="tooltip"]')
.forEach(tooltip => {
new bootstrap.Tooltip(tooltip)
})
</script>
<script>
function copy(text, target) {
setTimeout(function () {
$('#copied_tip').remove();
}, 800);
$(target).append("<div class='tip' id='copied_tip'>Copied!</div>");
var input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
var result = document.execCommand('copy');
document.body.removeChild(input)
return result;
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.2/svg.min.js" integrity="sha512-I rKw3hArzZIHzrkdELbKqrXfkSvw/h0lW/GgB8FThaBVz2e5ZUlSW8kY8v3q6wq37eybIwyufkEZxe4qSlGcg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>CodePudding user response：
At the time I started writing this answer, the question had no HTML. I'd update this answer with the OP's added HTML, but the JavaScript barely matches the HTML, so it isn't critical. The HTML and JavaScript in this answer is generic so it shouldn't be very difficult to adapt to typical HTML layouts.
Details are commented in example
// Collect all <button>s into an array
const btns = [...document.querySelectorAll('button')];
// Bind click event to each <button>
btns.forEach(btn => btn.addEventListener("click", animate));
/*
Event handler passes Event Object as default
On click, toggle .increase/.decrease classes on the clicked <button>
*/
function animate(event) {
event.target.classList.toggle('increase');
event.target.classList.toggle('decrease');
}@keyframes inc {
0% {
transform: scale(1);
}
100% {
transform: scale(1.5);
}
}
@keyframes dec {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
button {
display: flex;
justify-content: center;
align-items: center;
margin: 13px;
padding: 3px 5px;
cursor: pointer;
}
.decrease {
animation: 0.5s linear forwards dec;
}
.increase {
animation: 0.5s linear forwards inc;
}
.decrease::before {
content: '➕';
}
.increase::before {
content: '➖';
}<menu>
<button class='decrease'></button>
<button class='decrease'></button>
<button class='decrease'></button>
<button class='decrease'></button>
<button class='decrease'></button>
<button class='decrease'></button>
</menu>