How to hide the div after sometime in angular or css?


Tags: angularjs,css3

Problem :

I have one div, initially it is hidden. But on click of the button i am showing it using angular ng-show directive. After showing for 2 seconds i want to hide it. How to do it using angular or css anyone is ok.

HTML code

       <div class="subcontent tinyUrlContainer">
          <span class="slabel col-md-2">WAP Link :</span>
          <div class="input-group col-md-6">
                <input type="text" ng-model="wapLink"  class="form-control">
                <span class="input-group-btn" my-Tooltip>
                    <button type="button" class="btn btn-default" clipboard supported="supported" text="wapLink" ng-click="clipboard=true" on-error="fail(err)"><img class="clippy" src="./images/surveys/tinyUrl.png" width="13" alt="Copy to clipboard" data-pin-nopin="true"></button>
                </span>
          </div>

       </div> 
       <span class="copied col-md-offset-6 col-lg-offset-5  col-md-1" ng-show="clipboard">Copied!</span>

on click of the button am setting the clipboard as true and in .copied class element ng-show="clipboard" am setting.



Solution :

$scope.theClickFunction(){
    $scope.theShowFlag = true;
    $timeout(function(){
        $scope.theShowFlag = false;
    }, 2000);
}

    CSS Howto..

    How to invert colors using CSS on hover

    how to modify height of a div when hover it and with transition (priority of CSS without Javascript)

    How can one fix a CSS3 graident background when using a box for content?

    How can I override an inline style with an external css?

    How to detect IE8 separate from newer versions when IE8 compatibility set

    How to find all next siblings from a particular class using css selectors

    How to resize an image in pure HTML/CSS while keeping its proportions?

    How to get CSS table-cell to 100% for responsive design [closed]

    element doesn't show padding in Opera, Safari, IE

    How to add media='screen' in css using cakePHP?

    How to place a scroll down button in the middle of split screen window?

    How to specify image paths in CSS files?

    How to know if an element is rendered?

    How to Update Visual Studio's “Cascading Style Sheet Version for Validation”

    How do a Add scroll bar with fixed header

    How to refer to a child class CSS

    How to create CSS with 2 loops

    How to set a style one a parent element [duplicate]

    Using Susy, how can I make a div expand to height of tallest sibling?

    CSS: How to set a fallback for bold font families?

    How to give different views for same url for different devices with same resolution?

    How to set a relative position/size to the screen for elements in CSS/HTML? [closed]

    How do I center my search form within a div?

    CSS slide page up animation- element briefly shows before the animation

    How to get logo to front layer

    Show missing CSS in Google Chrome

    How to only select a displayed element using CSS

    How to set the style of the message in an SWT Text field?

    How to enlarge footer on mobile only?

    How can I remove vertical padding from ionic icon?