Set opacity programmatically

[julianschmuckli]

Hi,

I'm trying to set the opacity of a few elements back to 1 after I set it to 0 with an animation. Now normally I would set the opacity with the following command:

element.style.opacity = 1;

But this doesn't work. By the way, I use the following animation:

<animate attributeName="opacity" begin="enable" from="1" to="0" dur="0.3" final="keep" />

How can I achieve this?

Thank you in advance

Julian

[julianschmuckli]

I've fixed it with a little trick.

When the animation is finished (in my case after 300 milliseconds) I start a function with setTimeout(). This function set all the elements which I fade out with the animation frame to display: none;. I had also to set the animation final to "restore" instead of "keep".

Now I can simply set the display to inline instead of the opacity.

Here a quick example:

animationSecHand.animate("enable");
animationHourHand.animate("enable");
animationMinHand.animate("enable");
    
setTimeout(function(){
    hourHand.style.display = "none";
    minHand.style.display = "none";
    secHand.style.display = "none";
}, 300);

<animate attributeName="opacity" begin="enable" from="1" to="0" dur="0.3" final="restore" />

Of course, this is not a right answer for this topic. If you have a solution how to set the opacity normally, please tell us. Thank you.