09-23-2022 16:54
09-23-2022 16:54
Hi i have trouble using animationend event.
When i trigger an animation using the animate function, the event is never triggered.
I tried using the addEventListener function or the animation property itself (in this case it was the onanimationend).
I use the display option because i'm using it as a modal.
const Element = document.getElementById('myElem');
Elemen.style.display = 'inline';
Element.addEventListener('animationend', (e) => {
console.log('test');
});
Element.animate('enable')
<rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.6" id="myElem">
<animate attributeName="opacity" begin="enable" from="0" to="1" dur="0.4" final="keep"/>
</rect>
#myElem {
display: none;
x:0;
y:0;
width:100%;
height:100%;
}
What am i missing ?
Answered! Go to the Best Answer.
09-25-2022 14:24
09-25-2022 14:24
Radical theory:
<animate id='ani'...
09-23-2022 17:30
09-23-2022 17:30
Can you confirm that Elemen is actually Element? Is the element displayed, and do you see the animation?
09-23-2022 20:42
09-23-2022 20:42
This seems to be able to receive animation events. It's a bit bloated compared to your code, but you may be able to home in on the key difference. I tried briefly, but failed.
09-25-2022 07:31
09-25-2022 07:31
Yes, as shown in the exemple it's a rect element.
The element is displayed, and the animation runs correctly, but the event is never triggered 😕
09-25-2022 08:10 - edited 09-25-2022 08:14
09-25-2022 08:10 - edited 09-25-2022 08:14
I see that there is a system-events on the symbol, but i can't find any documentation on it.
If i set it on the rect element, i have this error
App: Error 22 Load event was not sent due to missing type handler 'myElem' in ./resources/views/exercise/index.view
i try to set an event handler on the load event like this
Element.onload = () => {
console.log('test');
}
but the error message is still there and no animation end triggered
09-25-2022 13:08 - edited 09-25-2022 13:10
09-25-2022 13:08 - edited 09-25-2022 13:10
If you only animate in index.view and want it to animate onload, you could set the animate begin="load".
Otherwise you really might need to set a flag, like in Gondwanas example. I personally never managed to detect if an animation is currently running in another way.
09-25-2022 13:32
09-25-2022 13:32
Yes, the system-events attribute is mysterious. I borrowed it from Fitbit's marquee component .view. It may only apply to <symbol>; not sure, I didn't fiddle with it for too long.
I did try to quickly convert your animation into a symbol with system-events, but the events still didn't happen.
If you run that ticker project, you'll see that events do come through. If you progressively migrate your code towards mine, or vice versa, there should come a point when the events start/stop working. That particular code change is the magic bullet.
09-25-2022 14:24
09-25-2022 14:24
Radical theory:
<animate id='ani'...
09-25-2022 14:35
09-25-2022 14:35
09-25-2022 14:58
09-25-2022 14:58
That's my wild guess. It's possible that id is used internally for event routing. No id, no event routing. Some other elements/components require ids to work properly.
09-25-2022 15:11
09-25-2022 15:11
09-26-2022 10:47 - edited 09-26-2022 12:03
09-26-2022 10:47 - edited 09-26-2022 12:03
You are right, system-events have no incidence on the behavior.
When i add an id, the event is triggered.
Thanks a lot @Gondwana 🙂
I have a question though, you said
@Gondwana wrote:Yes, the system-events attribute is mysterious. I borrowed it from Fitbit's marquee component .view. It may only apply to <symbol>; not sure, I didn't fiddle with it for too long.
How do you check the content of the existing components ?
09-26-2022 11:34
09-26-2022 11:34
Very intuitive, @Gondwana! 👏
09-26-2022 13:36
09-26-2022 13:36
@MrDeliK wrote:How do you check the content of the existing components ?
Fitbit Sim files. Not much is available to us; mostly only .view, .gui and .css. Have a search for marquee_text_widget.gui. Sometimes there are clues about the internal SVG structure of components, and use of undocumented element attributes.