JSFiddle - React, Tailwind, and code Playground

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div ng-app="myApp">
    <div ng-controller="HomeController">
        <button ng-click="grow=!grow">Grow</button>
        <div ng-class="{grown:grow}"
             class="animateMe">
            <h2>Grow me</h2>
        </div>
        <button type="button" class="btn btn-default btn-lg btn-block">
      块级的按钮
   </button>
    </div>
    </div>

CSS

.animateMe.grown-add,
        .animateMe.grown-remove {
            transition: 2s linear all;
            -webkit-transition: 2s 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;
    }]);