JSFiddle - React, Tailwind, and code Playground

by leftstick

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="myApp">
    <div ng-controller="HomeController">
        <button ng-click="grow=!grow" class="btn btn-default">Grow</button>
        <div ng-class="{grown:grow}"
             class="animateMe">
            <h2>Grow me</h2>
        </div>
    </div>
    </div>

CSS

.animateMe.grown-add,
        .animateMe.grown-remove {
            transition: 200s linear all;
            -webkit-transition: 200s linear all;
        }

        .grown {
            font-size: 50px;
        }

        .animateMe.grown-add {
            font-size: 16px;
        }

            .animateMe.grown-add.grown-add-active {
                font-size: 50px;
            }

        .animateMe.grown-remove {
        }

            .animateMe.grown-remove.grown-remove-active {
                font-size: 16px;
            }

JavaScript

var app = angular.module('myApp', ['ngAnimate']);
    app.controller('HomeController', ['$scope',function ($scope) {
        $scope.grow = false;
    }]);