Home Asp.net CSS3 Transition: fadeIn and fadeOut like Effects to Hide Show Elements

CSS3 Transition: fadeIn and fadeOut like Effects to Hide Show Elements

341
4
Redirect Page on Button Click

Now here in this tutorial, I’ll explain the CSS3 Transition: fadeIn and fadeOut like effects by and shows you how to control and do smooth transitions to show/hide HTML Elements.

In my previous tutorials, I’d explained jQuery fadeIn and fadeOut effect in asp.net, most popular fading effects, validate dropdownlist using javascript and other more cracking tutorials on Asp.net, JavaScript, jQuery, GridView here.

CSS3 transitions are the easiest way to animate HTML elements. CSS is used to control how web pages appear and shifts from one set of style sheets to another ordinarily occur abruptly.

We can show/hide any html elements by giving same effects as jQuery fadeIn and fadeOut by using the css3 `transition-delay` property, and apply a different delay to the opacity transition (no delay) and to the visibility transition (delay equal to the duration of the opacity transition). Adding CSS3 transition properties allows most of those changes to occur gradually, for a more vibrant, fluid interface to an HTML Elements.

fadeIn And fadeOut Like Effects – [.aspx]

Following is the complete HTML Markup code that I used for the demonstration:

<html>
<head>
    <title>Fade In and Fade Out effect Using CSS3 Transition</title>
    <style type="text/css">
        /* Fade-In Effect */
        .visible {
            visibility: visible;
            opacity: 1;
            transition: opacity 2s linear;
        }

        /* Fade-Out Effect */
        .hidden {
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s 2s, opacity 2s linear;
        }

        #wrapper > div {
            background: none repeat scroll 0 0 #f5f;
            border: 5px solid #808080;
            border-radius: 50px;
            padding: 10px;
            width: 250px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <p>
            <button type="button">Show HTML Element</button>
            <button type="button">Hide HTML Element</button>
        </p>
        <br />
        <div class="hidden">
            AspnetO - Quick Way To Learn Asp.net
        </div>
    </div>
    <script type="text/javascript">
        //Add query Selector
        var showButtonClick = document.querySelector("#wrapper button:nth-of-type(1)"),
            hideButtonClick = document.querySelector("#wrapper button:nth-of-type(2)"),
            content = document.querySelector("#wrapper > div");

        //Show wrapper div content
        showButtonClick.addEventListener("click", function () {
            content.className = "visible";
        }, false);

        //Hide wrapper div content
        hideButtonClick.addEventListener("click", function () {
            content.className = "hidden";
        }, false);
    </script>
</body>
</html>

Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition

You can learn more about, how to show hide tooltip using css3 transitions here.

Download Example

Git Repo

That’s it, this is one of the best way to hide or show element using fadeIn and fadeOut effects using css3 transition in asp.net.

Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.

Happy Coding!

Previous articleHow to Connect to Windows VPS or Windows Server Via RDP
Next articleGet Selected Text Value from DropDownList in Asp.net jQuery
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

4 COMMENTS

  1. can you post a demo of how you would use generic text links to achieve the effect? like “show” and “hide” text links (rather than buttons). thanks

LEAVE A REPLY

Please enter your comment!
Please enter your name here

two × 1 =