My Technical Notes

Thursday, 20 August 2015

Angular Animation - Fading In and Fading Out

To use the below sample, replace `lorem-ipsum` with your own class's name.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <style>
        .loren-ipsum.ng-hide-add, .loren-ipsum.ng-hide-remove {
            -moz-transition: opacity 0.4s ease-in-out;
            -o-transition: opacity 0.4s ease-in-out;
            -webkit-transition: opacity 0.4s ease-in-out;
            transition: opacity 0.4s ease-in-out;
            display: block !important; /* this needs to be here to make it visible during the animation since the .ng-hide class is already on the element rendering it as hidden. */
        }

        .loren-ipsum.ng-hide {
            opacity: 0;
        }
    </style>
</head>
<body>
    <div ng-app="app" ng-controller="ctrl">
        <button ng-click="hide = !hide">Show/hide para</button>
        <div ng-hide="hide" class="loren-ipsum">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante ligula, scelerisque at aliquam sed, commodo ac lorem. Duis ut pretium lorem, eu aliquam est. Proin vitae urna dapibus, interdum leo non, suscipit libero. Mauris semper odio vel urna aliquam vestibulum. Fusce quis mollis odio. Maecenas nibh nibh, cursus in mauris nec, sodales aliquam ante. Quisque pharetra luctus turpis, eu euismod nibh egestas in.
            </p>
            <p>
                Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ut ultrices magna. Mauris elementum elementum orci, ac congue justo egestas eget. Sed at mauris iaculis, eleifend justo non, dictum lectus. Nulla facilisi. Mauris ac volutpat risus, nec ornare felis. Sed vulputate nunc id pellentesque porta. Fusce at neque nisi. Aenean quis eros dignissim, gravida ante dictum, interdum nisl. Aliquam at tincidunt mi, in mollis ipsum. Quisque venenatis leo sed risus maximus aliquet. Sed iaculis erat vel ornare dictum. Curabitur nec ipsum eros. Nunc non augue a mi faucibus malesuada at sit amet erat.
            </p>
        </div>
    </div>

    <script>
        var app = angular.module('app', ['ngAnimate']);

        app.controller('ctrl', function ($scope) {
            $scope.hide = true;
        });
    </script>
</body>
</html>

To apply this to all elements that are hidden using `ng-hide` and `ng-show`:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <style>
        .ng-hide-remove, .ng-hide-add {
            -moz-transition: opacity 0.4s ease-in-out;
            -o-transition: opacity 0.4s ease-in-out;
            -webkit-transition: opacity 0.4s ease-in-out;
            transition: opacity 0.4s ease-in-out;
            display: block !important; /* this needs to be here to make it visible during the animation since the .ng-hide class is already on  the element rendering it as hidden. */
        }

        .ng-hide {
          opacity:0;
        }
    </style>
</head>
<body>
    <div ng-app="app" ng-controller="ctrl">
        <button ng-click="hide = !hide">Show/hide para</button>

        <div ng-hide="hide" class="loren-ipsum">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante ligula, scelerisque at aliquam sed, commodo ac lorem. Duis ut pretium lorem, eu aliquam est. Proin vitae urna dapibus, interdum leo non, suscipit libero. Mauris semper odio vel urna aliquam vestibulum. Fusce quis mollis odio. Maecenas nibh nibh, cursus in mauris nec, sodales aliquam ante. Quisque pharetra luctus turpis, eu euismod nibh egestas in.
            </p>
            <p>
                Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer ut ultrices magna. Mauris elementum elementum orci, ac congue justo egestas eget. Sed at mauris iaculis, eleifend justo non, dictum lectus. Nulla facilisi. Mauris ac volutpat risus, nec ornare felis. Sed vulputate nunc id pellentesque porta. Fusce at neque nisi. Aenean quis eros dignissim, gravida ante dictum, interdum nisl. Aliquam at tincidunt mi, in mollis ipsum. Quisque venenatis leo sed risus maximus aliquet. Sed iaculis erat vel ornare dictum. Curabitur nec ipsum eros. Nunc non augue a mi faucibus malesuada at sit amet erat.
            </p>
        </div>
    </div>

    <script>
        var app = angular.module('app', ['ngAnimate']);

        app.controller('ctrl', function ($scope) {
            $scope.hide = true;
        });
    </script>
</body>
</html>

No comments: