Simple Button Animation In TypeScript

Nitin Bhardwaj
11y
16.4k
0
0

Article

Introduction

We learn how to change the color (background or foreground color) of the mouse during an event with the help of TypeScript.

The following example showS how to use button animation in a web application in TypeScript. In this example we use a Button control (buttonchange). We set the color (background and foreground color) as needed.

There are two TypeScript Functions in it:

ChangeColor(): To change the color on the onmouseover event
HideColor(): Sets the default color on the onmouseout event

Here we call the ChangeColor() function on the onmouseover event. In the ChangeColor() function, we call another function Change2(). This function is used to change the color of the button again.

Note: Here we call the setTimeout function; it helps us to call the function ( otherChange2() ) after 1 second (1000 milliseconds).

Now we call the HideColor() function on the onmouseout event. It sets the default color of the button. Let's use the following.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.

Give the name of your application as "Button_Animation" and then click "Ok".

Step 2

After Step 1, right-click on "Button_Animation". A pop up window is opened. Click on "Add" -> "New Item" -> "Web Form". Give the name of your WebForm as "Demo.aspx" and then click "Ok".

Step 3

After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file, css file and aspx files and looks as in the following:

Coding

app.ts

class Button_Animation {

ChangeColor()

{

document.getElementById('buttonchange').style.backgroundColor = "Blue";

document.getElementById('buttonchange').style.color = "White";

setTimeout(() => { this.Change(); }, 1000);

}

Change()

{

document.getElementById('buttonchange').style.backgroundColor = "Purple";

document.getElementById('buttonchange').style.color = "White";

setTimeout(() => { this.otherChange(); }, 1000);

}

otherChange()

{

document.getElementById('buttonchange').style.backgroundColor = "Red";

document.getElementById('buttonchange').style.color = "Black";

}

HideColor()

{

document.getElementById('buttonchange').style.backgroundColor = "green";

document.getElementById('buttonchange').style.color = "Black";

}

window.onload = () => {

var obj = new Button_Animation();

var changecolor = (<HTMLButtonElement>document.getElementById("buttonchange"));

changecolor.onmouseover = function ()

{

obj.ChangeColor();

};

changecolor.onmouseout = function ()

{

obj.HideColor();

};

Demo.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="simple_animation.Demo" %>

<!DOCTYPE html>

#buttonchange {

width: 220px;

height: 103px;

}

</style>

</head>

<body>

<div>

<asp:Label ID="Label1" runat="server" Font-Italic="True" Font-Size="Large" ForeColor="#660033" Text="Simple Button Animation in WebApplication Using TypeScript"></asp:Label>

<br />

</div>

</form>

</body>

</html>

app.js

var Button_Animation = (function () {

function Button_Animation() { }

Button_Animation.prototype.ChangeColor = function () {

var _this = this;

document.getElementById('buttonchange').style.backgroundColor = "Blue";

document.getElementById('buttonchange').style.color = "White";

setTimeout(function () {

_this.Change();

}, 1000);

};

Button_Animation.prototype.Change = function () {

var _this = this;

document.getElementById('buttonchange').style.backgroundColor = "Purple";

document.getElementById('buttonchange').style.color = "White";

setTimeout(function () {

_this.otherChange();

}, 1000);

};

Button_Animation.prototype.otherChange = function () {

document.getElementById('buttonchange').style.backgroundColor = "Red";

document.getElementById('buttonchange').style.color = "Black";

};

Button_Animation.prototype.HideColor = function () {

document.getElementById('buttonchange').style.backgroundColor = "green";

document.getElementById('buttonchange').style.color = "Black";

};

return Button_Animation;

})();

window.onload = function () {

var obj = new Button_Animation();

var b = (document.getElementById("buttonchange"));

b.onmouseover = function () {

obj.ChangeColor();

};

b.onmouseout = function () {

obj.HideColor();

};

//@ sourceMappingURL=app.js.map

Output 1

Output 2

Mouse over on Button

Output 3

Hold mouse (1 millisecond) on Button

Output 4

Mouse out on Button

Reference By

http://www.typescriptlang.org/

Up Next

Ebook Download

View all

Test

Read by 16 people

Download Now!

Learn

View all