[рони]

fori,

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="vue">
    <button @click="anim">first</button>
    <button @click="anim">second</button>
    <button @click="anim">third</button>
    <button @click="anim">fouth</button>
    <button @click="anim">fifth</button>
</div>
<style>
#vue{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.WrongAnim {
    animation: swing 0.5s linear; }
@keyframes swing {
    10% {
        transform: translateX(15%); }
    20% {
        transform: translateX(-13.5%); }
    30% {
        transform: translateX(12%); }
    40% {
        transform: translateX(-10.5%); }
    50% {
        transform: translateX(9%); }
    60% {
        transform: translateX(-7.5%); }
    70% {
        transform: translateX(6%); }
    80% {
        transform: translateX(-4.5%); }
    90% {
        transform: translateX(3%); }
    100% {
        transform: translateX(0); } }
</style>
<script>


var vue = new Vue({
        el: '#vue',
        data: {
        },
        methods: {
                anim({target}) {
                     target.classList.remove('WrongAnim');
                     document.documentElement.clientHeight;
                     target.classList.add('WrongAnim');
                }
        },
})
</script>