[AngularJS] ngAnimate angular way !!

Idea is set up javascript  as an api, then just change html to control the behavor.

var app = angular.module("app", ["ngAnimate"]);
app.controller("AppCtrl", function() {
    this.isHidden = false;
    this.isLarged = false;
    this.idReded = false;
    this.fadeIt = function(){
        this.isHidden = !this.isHidden;
        this.idReded = !this.idReded;
        this.isLarged = !this.isLarged;
    }
});

app.directive('hideMe',function( $animate ){
    return function(scope, element, attrs){
        scope.$watch(attrs.hideMe, function(newVal){
            if(newVal){
                $animate.addClass(element, "fade")
            }else{
                $animate.removeClass(element, "fade")
            }
        })
    }
})

app.directive('redMe',function($animate){
    return{
        link:function(scope, el, attrs){
            scope.$watch(attrs.redMe, function(newVal){
                if(newVal){
                   $animate.addClass(el, "red");
                }else{
                    $animate.removeClass(el, "red");
                }
            })
        }
    }
})

app.directive('largeMe',function($animate){
    return function(scope, element, attrs){
        scope.$watch(attrs.largeMe,function(newVal){
            if(newVal){
                $animate.addClass(element, "large")
            }else{
                $animate.removeClass(element, "large")
            }
        })
    }
})

app.animation('.fade',function(){
    return{
        addClass:function(element, className){
              console.log(className);
             TweenMax.to(element, 1, {opacity: 0})
        },
        removeClass:function(element,className){
            TweenMax.to(element, 1, {opacity: 1})
        }
    }
})

app.animation('.large',function(){
    return{
        addClass:function(element, className){
            TweenMax.to(element, 1, {scale: 2})
        },
        removeClass:function(element,className){
            TweenMax.to(element, 1, {scale: 1})
        }
    }
})

app.animation('.red',function(){
    return{
        addClass:function(element, className){
            TweenMax.to(element, 1, {color: "red"})
        },
        removeClass:function(element,className){
            TweenMax.to(element, 1, {color: "white"})
        }
    }
})

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>Egghead Videos</title>
    <link rel="stylesheet" href="./topcoat-desktop-light.min.css">
    <link rel="stylesheet" href="./bootstrap-theme.min.css">
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script type="text/javascript" src="./angular.min.js"></script>
    <script type="text/javascript" src="./angular-animate.min.js"></script>
    <script type="text/javascript" src="./app.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<button class="btn-primary" ng-click="app.fadeIt()">Click to fade</button>
<hr/>
<button class="badge" hide-me="app.isHidden">Fade me</button>
<button class="badge" hide-me="app.isHidden">Fade me</button>

<button class="badge" large-me="app.isLarged">Fade me</button>
<button class="badge" hide-me="app.isHidden">Fade me</button>

<button class="badge" hide-me="app.isHidden">Fade me</button>
<button class="badge" red-me="app.idReded">Fade me</button>
</body>
</html>

 

posted @ 2014-08-28 16:57  Zhentiw  阅读(621)  评论(0)  编辑  收藏  举报