[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 @   Zhentiw  阅读(621)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae