Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
TypeScript

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

Up Next
    Ebook Download
    View all

    Test
    Read by 16 people
    Download Now!
    Learn
    View all