Event

[maximebodereauseelab]

Can we "activate" the animation on click event ?

[leonardobetti]

same question, cant make it work when I click just hover or page refresh

[xenvi]

this can be done by creating a state variable and defining the css animation class when that variable meets a condition (ex: set state to true on click, play animation, settimeout state back to false). unsure if there are plans to make an easier handler but this works for now

[MarkusRink]

The shortest way I found is this (for non looping animations):

<script>
const doAnimation = ref(false)
</script>
<template>
<button
  :class="{'motion-opacity-out-0':doAnimation}"
  @click='doAnimation = true'
  @animationend='doAnimation = false'
>
anmiate
</button
</template>

In Vue, maybe a wrapper component with slot props could help remove the animation variable from the script.