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">
            <span>Grow me</span>
        </div>
    </div>
    </div>

CSS

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

.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;
    }]);