uni-app 點擊元素左右抖動效果

<template>
    <view class="all">
        <view class="btn" @click="sidebarClick">點擊</view>
        <view class="animation" :class="'animation-' + animation"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                animation: '',  // 動畫樣式
            }
        },
        methods: {
            sidebarClick () {
                this.animation = 'shake';
                setTimeout( () => {
                    this.animation = ''
                },2000);
            }
        }
    }
</script>

<style lang="less">
    .all {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.5rem 1rem;
        box-sizing: border-box;
        .btn {
            width: 5rem;
            height: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #FFFFFF;
            margin-top: 0.5rem;
        }
        .animation {
            width: 10rem;
            height: 2rem;
            background: #FFFFFF;
            margin-top: 0.5rem;
        }
        .animation-shake {
            animation: shake 0.3s !important;
        }
    }
    
    @keyframes shake {
        0%,
        100% {
                transform: translateX(0)
        }

        10% {
                transform: translateX(-9px)
        }

        20% {
                transform: translateX(8px)
        }

        30% {
                transform: translateX(-7px)
        }

        40% {
                transform: translateX(6px)
        }

        50% {
                transform: translateX(-5px)
        }

        60% {
                transform: translateX(4px)
        }

        70% {
                transform: translateX(-3px)
        }

        80% {
                transform: translateX(2px)
        }

        90% {
                transform: translateX(-1px)
        }
    }
    
</style>