Simple Button Animation In TypeScript

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:

1. ChangeColor(): To change the color on the onmouseover event
2. 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 >
 <
 html xmlns = "http://www.w3.org/1999/xhtml" >
 <
 head runat = "server" >
 <
 title > < /title>
 <
 script src = "app.js" > < /script>
 <
 style type = "text/css" >
 #buttonchange {
  width: 220 px;
  height: 103 px;
 }
 <
 /style>
 <
 /head>
 <
 body >
 <
 form id = "form1"
runat = "server" >
 <
 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 / >
 <
 br / >
 <
 input id = "buttonchange"
type = "button"
value = "C# sharp corner" / >
 <
 /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();
 };
};

Output 1

 

 

Output 2

 

Mouse over on Button

 

 

Output 3

 

Hold mouse (1 millisecond) on Button

 

 

 

Output 4

 

Mouse out on Button

 

 

Referenced By

http://www.typescriptlang.org/