How to fade in and out an element

How-to Discussions
1

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">
  <WhileEnabled>
      <Change Target="MyElement.Opacity" Value="1" Duration=".5f" />
      <Change MyElement.IsEnabled="false" Delay="1" />
  </WhileEnabled>
  <WhileDisabled>
      <Change Target="MyElement.Opacity" Value="0" Duration=".5f" />
  </WhileDisabled>
 </Panel>

With

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

Also tried:

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

With

// 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.

2 
<App Theme="Basic">
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var somethingHappens = Observable(false);
        function makeItHappen() {
            somethingHappens.value = true;
            somethingHappens.value = false;
        }
        setTimeout(makeItHappen, 1000);
        module.exports = { somethingHappens: somethingHappens};
    </JavaScript>
    <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>
        <WhileTrue Value="{somethingHappens}">
            <Pulse Target="fadeInAndOut" />
        </WhileTrue>
    </Panel>
</App>

Probably something like this?