JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.js"></script>
<div>
    <div ng-if="onOff" class="fold-animation" ng-cloak>This element will go BOOM</div>
    <button ng-click="onOff=true">Fold In</button>
</div>

CSS

.red {
    background:red;
}
.large-text {
    font-size:20px;
}
.pulse-twice {
    animation: 0.5s pulse linear 2;
    -webkit-animation: 0.5s pulse linear 2;
}
@keyframes pulse {
    from {
        transform: scale(0.5);
    }
    to {
        transform: scale(1.5);
    }
}
@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale(0.5);
    }
    to {
        -webkit-transform: scale(1.5);
    }
}

JavaScript

angular.module('App', ['ngAnimate'])
    .animation('.fold-animation', ['$animateCss', function ($animateCss) {
    return {
        enter: function (element, doneFn) {
            var height = element[0].offsetHeight;
            return $animateCss(element, {
                from: {
                    height: '0px'
                },
                to: {
                    height: height + 'px'
                },
                /*
                addClass: 'red large-text pulse-twice',
                */
                easing: 'ease-out',
                duration: 1 // one second
            });
        }
    }
}]);

angular.element(document).ready(function () {
    angular.bootstrap(document, ['App']);
});