как сделать чтобы после анимации трансформ, элемент возвращался моментально на свое место без анимации

Рейтинг: 0Ответов: 1Опубликовано: 09.03.2023

Как после анимации трансформ, элемент возвращался моментально на свое место без анимации, и анимацию можно было бы повторно запустить кликом с событием. Возможно это как-то по особенному делается во vue, в обработчике просто булев атрибут относительно которого добавляется стиль с анимацией. По ощущениям просто в css что-то прописать нужно... Проект маленький, вот ссылка на гит https://github.com/GansLiber/Vue_1zad.git

<img :src="image" :alt="altText" :class="{ moveRight:animate }" id="img" class="img van">

.moveRight{
    transform: translate(1350px,-420px) rotate(100deg) scale(-0);
    animation-delay: 1s;
}



 data(){
    cart:0,
    anumate: true
}
    methods:{
                animationImg(value) {
                return this.animate = value
            },
            addToCart() {
                this.animationImg(true)
                if (this.cart < this.inventory) {
                    this.$emit('add-to-cart', this.variants[this.selectedVariant].variantId);
                }
                console.log(this.animate)
    
                setTimeout(() => {
                    console.log(this.animate)
                    this.animationImg(false)
                }, 1000)
    
            },
    }
css javascript vue.js события transform
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Прежде всего чтобы не приходилось писать setTimeout нужно вспомнить что для анимации тоже существуют события поэтому мы добавляем animationend к картинке.

    <div id="axis" class="one">
        <img :src="image" :alt="altText" class="img van duplicate">
        <img :src="image" 
             :alt="altText" 
             :class="{ moveRight:animate }"
             @animationend="animationEnd"
             id="img"
             class="img van"
        >
    </div>

Обработчик соответсвенно такой:

    animationEnd(){
        this.animationImg(false)
    },

Далее на счет самой анимации. При использовании именно анимации а не просто трансформа проблем с мгновенным возвратом никаких не возникает. Т.е. переписываем правила так:

@keyframes moveRightAnimation {
    from {
       transform: none;
    }
    to {
        transform: translate(1350px,-420px) rotate(100deg) scale(-0);
    }
}

.moveRight{
    animation: moveRightAnimation ease-out 1s 1;
}

Последняя единица это iteration-count — количество повторов (в Вашем случае 1). С другими аргументами анимации можно поэксперементировать.