How to fade in and out an element

I would like to fade in a view when something happens and then fade it out after few seconds, but am struggling to get this to work.

Some of the many things I’ve tried:

<Panel ux:Name="MyElement" Opacity="0">
      <Change Target="MyElement.Opacity" Value="1" Duration=".5f" />
      <Change MyElement.IsEnabled="false" Delay="1" />
      <Change Target="MyElement.Opacity" Value="0" Duration=".5f" />


// that something happens:
MyElement.IsEnabled = true;

Also tried:

<Panel ux:Name="MyElement" Visibility="Collapsed">
      <Change Target="MyElement.Opacity" Value="1" Duration=".5f" />
      <Change Target="MyElement.Opacity" Value="0" Duration="1" Delay="1" />
      <Change MyElement.Visiblity="Collapsed" Delay="2" />


// that something happens:
MyElement.Visibility = Fuse.Elements.Visibility.Visible;

But these don’t work. It fades in nicely, but then fades down for about 50% and either start flickering or just stops there.

<App Theme="Basic">
        var Observable = require("FuseJS/Observable");
        var somethingHappens = Observable(false);
        function makeItHappen() {
            somethingHappens.value = true;
            somethingHappens.value = false;
        setTimeout(makeItHappen, 1000);
        module.exports = { somethingHappens: somethingHappens};
    <Panel ux:Name="MyElement" Opacity="0" Background="#aaa">
        <WhileTrue ux:Name="fadeInAndOut">
            <Change Target="MyElement.Opacity" Value="1" Duration="0.3" DelayBack="2" Easing="CircularInOut" />
        <WhileTrue Value="{somethingHappens}">
            <Pulse Target="fadeInAndOut" />

Probably something like this?