Reader Level:
ARTICLE

Simple Button Animation In TypeScript

Posted by Nitin Bhardwaj Articles | TypeScript December 19, 2012
In this example, we learn how to change the color (background or foreground color) of the mouse during an event using a web application in TypeScript.
  • 0
  • 0
  • 3710
Download Files:
 

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: 220px;

            height: 103px;

        }

    </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();

    };

};

//@ sourceMappingURL=app.js.map

 

Output 1


first-image.jpg

 

Output 2


Mouse over on Button


After-change-function-image.jpg

 

Output 3


Hold mouse (1 millisecond) on Button


after-1-second-image.jpg


after-1-second-image-2.jpg

 

Output 4


Mouse out on Button


final-image.jpg

 

Reference By

http://www.typescriptlang.org/

COMMENT USING

Trending up