Trying to do something like this:
<template>
<ion-item button @click="onSelected">
<ion-icon icon="caret-down-circle" ref="toggleIcon" />
</ion-item>
<template>
...
setup() {
const toggleIcon = ref()
const toggleAnimation = createAnimation()
.addElement(toggleIcon.value)
.duration(500)
.fromTo('opacity', '1', '0')
function onSelected() {
toggleAnimation.play()
}
return {
onSelected
}
}
I understand that this does not work because the toggleIcon template ref does not get bound until the component is mounted, so the animation does not get added to the element properly. What I am unsure about is how to arrange this properly so that the animation will get bound properly and be available within the onSelected method?
Tried creating the animation inside an onMounted method, but then it is unavailable when the onSelected method is defined. If I define the method inside onMounted as well, then it wont be available to return from the setup method initially.
The examples in docs don’t seem to provide enough context to clarify proper usage either. Appreciate any suggestions. Hopefully I am just missing some basic piece.
6 posts - 2 participants