ARTICLE

Simple Button Animation In TypeScript

Posted by Nitin Bhardwaj Articles | TypeScript December 19, 2012
Tags: button animation in typescript, Simple Button Animation, typescript, use buttons in typescript
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.
Reader Level:
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/

Login to add your contents and source code to this article
This Feature is Sponsored By DynamicPDF Merger is a developers dream for interacting with any existing PDF documents. Merge, append, split, form fill, flatten stamp and so much more.
post comment
     

Nice Onethanx

Posted by Rajeev Kumar Dec 26, 2012

good example and explanation about mouse event

Posted by Sharad Gupta Dec 26, 2012
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
TRENDING UP
MOST LIKED ARTICLE
HOT KEYWORDS
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.
Join a Chapter
WHITEPAPERS AND BOOKS
Hosted By CBeyond Cloud Services MVPs MOST VIEWEDLEGENDSNOW PRIZESAWARDSREVIEWSSURVEYCERTIFICATIONSDOWNLOADS
PRIVACY POLICY | TERMS & CONDITIONS | SITEMAP | CONTACT US | ABOUT US | REPORT ABUSE
©2013 C# Corner. All contents are copyright of their authors.