JSFiddle - React, Tailwind, and code Playground

by Yang Tyler

HTML

<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular-animate.js"></script>
<div ng-app="MyApp">
    <div id="mainCtner" ng-controller="MainController">
        <span>{{test}}</span>
        <div class="bgContent" test-trans></div>
    </div>
</div>

CSS

#mainCtner{
    background-color: #ccc;
    width: 400px;
    height: 400px;
}
.bgContent{
    background-color: red;
    width: 100px;
    height: 100px;
}
.bgResize.bgResize-add.bgResize-add-active{
    opacity: 0;
}
.bgResize.bgResize-add{
    -webkit-transition: all ease-in 1s;
    transition: all ease-in 1s;
    display:block!important;
    opacity: 1;
}

JavaScript

console.log('run script...');
var myApp = angular.module('MyApp', ['ngAnimate']);
myApp.controller('MainController', function($scope, $animate){
    $scope.test = 'abcd';
    /*
    $scope.triggerAnimate = function(target){
        console.log('animating...');
        var ele = angular.element(target);
        console.log(ele);
        $animate.animate(ele, "10px", "20px",  "bgResize");
    };
    */
});
myApp.directive('testTrans', function(){
    function linkFunc(scope, element, attrs){
        var class = 'bgResize';
        element.on('click', function(evt){
            evt.preventDefault();
            $animate.addClass(element, class);
        });
    }
    return {
        link: linkFunc
    }
});