Proponuję takie rozwiązanie przez użycie v-for i animacji css.
<div id="app">
<div v-for="link in links" class="button-copy-link">
<span>URL copied!</span>
<div :data-link="link.url" @click="copyLink">
{{link.name}}
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.5.2/clipboard-polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.button-copy-link{
position: relative;
width: 325px;
height: 50px;
font-family: "Nunito";
background-color: var(--green-color);
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #000;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.35s ease;
}
.button-copy-link:hover{
letter-spacing: 0.25em;
transform: scaleX(1.05);
}
.button-copy-link:active{
transform: scale(1.00);
letter-spacing: normal;
}
.button-copy-link span{
position: absolute;
color: #000;
font-weight: 600;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.05em;
visibility: hidden;
opacity: 0;
transform: scale(1.00) translateY(10px);
/* transition: transform 0.25s ease, opacity 0.15s ease, visibility 0.15s ease; */
}
.button-copy-link span.visible{
animation: label_visible 5s ease-in-out;
/*visibility: visible;
opacity: 1;
transform: scale(1.00) translateY(15px);*/
}
@keyframes label_visible {
from { visibility: hidden; opacity: 0; transform:translateY(0px); }
10%, 90% { visibility: visible; opacity: 1; transform:translateY(15px); }
to { visibility: hidden; opacity: 0; transform:translateY(0px); }
}
new Vue({
el: "#app",
data: {
links: [
{ name: "Link 1", url: "https://www.link1.com" },
{ name: "Link 2", url: "https://www.link2.com" },
{ name: "Link 3", url: "https://www.link3.com" },
{ name: "Link 4", url: "https://www.link4.com" }
]
},
methods: {
copyLink: function(e) {
if (e.target.dataset.link) {
url = e.target.dataset.link;
clipboard.writeText(url);
label = e.target.parentNode.querySelector('span');
label.classList.remove("visible");
void label.offsetWidth;
label.classList.add("visible");
}
}
}
})
P.S.
Restart CSS Animation