@yukichiiiiposted at 2022-11-23

vue.js 動的クラスに動的なアニメーションを付ける方法

Q&A

Closed

解決したいこと

vue@3.2.37を使用しています。
動的にクラス（button-1～4）を付け作成しているボタンに対し、
一定の時間で状態チェックを行い、条件に当てはまったら3パターンのアニメーションを4秒間実施するといった機能を作っています。

javascriptの「document.getElementsByClassName()」を使用すればうまく動きました。
ですが、せっかくvueを使用しているので、v-bindなどを使用してどうにかできないか試行錯誤をしているのですが、
対象のボタンにだけアニメーションを付けることができず苦戦しております。

アドバイスいただけますと幸いです。

発生している問題・エラー

対象のボタンごとにアニメーションを指定したい

該当するソースコード

※対象箇所はspanタグのクラスです。

vue.js

<script setup>
    const buttton = [
            {
              id:1,
              text: "hoge",
            },
            {
              id:2,
              text: "hoge",
            }
            {
              id:3,
              text: "hoge",
            }
            {
              id:4,
              text: "hoge",
            }
    ];
    
    const store = reactive({
      size: '',
    });

    const classObj = computed(() => {
       return {'large-active': store.size == 'large', 'medium-active': store.size == 'medium',
                    'small-active':　store.size == 'small'}
    });

    window.setInterval(getBtnPress, 15000);

    function getBtnPress(){

    if(hogehoge ~~~){
        store. size = "large";

        setTimeout(() => {
            store. size = "";
        }, 4000);

    } else if(hogehoge ~~~) {
        store. size = "medium";

        setTimeout(() => {
            store. size = "";
        }, 4000);
    } else if (hogehoge ~~~){
        store. size = "small";

        setTimeout(() => {
            store. size = "";
        }, 4000);
    }

</script>

<template>
    <div>
        <a
         v-for="{ id, text } in buttton"
         :key="id"
         :class="['button' + id]"
         @click="click(id)"
        >
            <span :class="['icon' + id , classObj]">
                <div 
                 :style="{ 'background-image': 'url(/public/assets/images/icon_' + id + '.png)' }"
                ></div>
            </span>
            {{ text }}
        </a>
    </div>
</template>

.css
@keyframes smallMotion {
	0% {
		transform: translate(-50%, -50%) scale(1, 1);
		background-color: rgba(170, 143, 123, 0.4)
	}
	100% {
		transform: translate(-50%, -50%) scale(1.2222222222, 1.2222222222);
		background-color: rgba(170, 143, 123, 0.4)
	}
}
@keyframes mediumMotion {
	0% {
		transform: translate(-50%, -50%) scale(1, 1);
		background-color: rgba(170, 143, 123, 0.4)
	}
	100% {
		transform: translate(-50%, -50%) scale(1.4444444444, 1.4444444444);
		background-color: rgba(170, 143, 123, 0.4)
	}
}
@keyframes largeMotion {
	0% {
		transform: translate(-50%, -50%) scale(1, 1);
		background-color: rgba(170, 143, 123, 0.4)
	}
	100% {
		transform: translate(-50%, -50%) scale(1.6666666667, 1.6666666667);
		background-color: rgba(170, 143, 123, 0.4)
	}
}

span.small-active:after {
	animation: smallMotion 1.4s linear infinite;
}
span.medium-active:after {
	animation: mediumMotion 1.4s linear infinite;
}
span.large-active:after {
	animation: largeMotion 1.4s linear infinite;
}

自分で試したこと

document.getElementsByClassName()で要素を取得し、
doc.classlist.addとdoc.classlist.removeを使用すれば動くことはわかりました。
そもそもv-bindを使用してることが無茶で、「classList」を使うことが正しければその旨もご教授いただければ幸いです。
経験不足でつたない説明で恐縮ですが、アドバイスお願いいたします！

0 likes

Are you sure you want to delete the question?