Fade-In / Out Animation

How-to Discussions
1

I have an image, and on click of a button/image, I want to display an “overlay” over the image. The overlay will have a button to click, and by clicking it, the overlay disappears.

I am able to achieve this with the following code:

<Image File="background.png"/>
<Image File="button.png" Clicked="{click}"/>
<Panel ux:Name="Panel1" Visibility="{Panel1Visibility}">

So by clicking the “button.png” image, a click event is handled changing the visibility of the Panel, which will be displayed through the following JavaScript code:

var Observable = require("FuseJS/Observable");
var Panel1Visibility = Observable("Collapsed");

function click() {
  if (Panel1Visibility.value == "Visible") {
    Panel1Visibility.value = "Collapsed";
  } else {
    Panel1Visibility.value = "Visible";
  }
}

module.exports = {
  Panel1Visibility: Panel1Visibility,
  click: click
};

The question I’m having is how do I animate the overlay to be a fade-in for example? With my current solution, the overlay comes immediately. Where do I add the fade-in animation, and how do I do it?

2

Hi Matt,

there are several ways to approach this, and I’ll highlight two that I would consider:

<App>

	<JavaScript>
	var Observable = require("FuseJS/Observable");

	var overlayRedVisible = Observable(false);
	var overlayBlueVisible = Observable(false);

	function showRedOverlay() {
		overlayRedVisible.value = true;
	}
	function hideRedOverlay() {
		overlayRedVisible.value = false;
	}

	function showBlueOverlay() {
		overlayBlueVisible.value = true;
	}
	function hideBlueOverlay() {
		overlayBlueVisible.value = false;
	}

	module.exports = {
		overlayRedVisible: overlayRedVisible,
		showRedOverlay: showRedOverlay,
		hideRedOverlay: hideRedOverlay,
		overlayBlueVisible: overlayBlueVisible,
		showBlueOverlay: showBlueOverlay,
		hideBlueOverlay: hideBlueOverlay
	};
	</JavaScript>

	<WhileTrue Value="{overlayRedVisible}">
		<Panel ux:Name="overlayRed" Opacity="1" Color="#f006">
			<RemovingAnimation>
				<Change overlayRed.Opacity="0" Duration="0.36" />
			</RemovingAnimation>
			<AddingAnimation>
				<Change overlayRed.Opacity="0" Duration="0.36" />
			</AddingAnimation>
			<Clicked>
				<Callback Handler="{hideRedOverlay}" />
			</Clicked>
		</Panel>
	</WhileTrue>

	<Panel ux:Name="overlayBlue" Opacity="0" Color="#00f6" Visibility="Collapsed">
		<Clicked>
			<Callback Handler="{hideBlueOverlay}" />
		</Clicked>
	</Panel>

	<WhileTrue Value="{overlayBlueVisible}">
		<Change overlayBlue.Visibility="Visible" Delay="0" DelayBack="0.26" />
		<Change overlayBlue.Opacity="1" Duration="0.36" />
	</WhileTrue>

	<StackPanel Alignment="Center" ItemSpacing="16">
		<Panel Width="128" Height="56" Color="#faa" Clicked="{showRedOverlay}" />
		<Panel Width="128" Height="56" Color="#aaf" Clicked="{showBlueOverlay}" />
	</StackPanel>

</App>

I personally would go with the “blue” approach, not the “red” one. But it really depends on your use-case; sometimes the “red” one will make more sense.

3

Thanks for a great answer! Fun to see multiple ways to implement this!