[AngularJS] ngAnimate using Javascript. 2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>Egghead Videos</title>
    <link rel="stylesheet" href="./foundation.min.css">
    <link rel="stylesheet" href="./topcoat-desktop-light.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">
<body class="well-lg" ng-app="app" ng-controller="AppCtrl as app">

<button class="topcoat-button--large--cta" ng-click="app.toggle=!app.toggle">Goodbye, fair notification</button>
<hr/>
<div class="topcoat-notification toggle" ng-if="app.toggle" id="d1">I'm too young to fade! :(</div>
</body>
</html>

.toggle {
    -webkit-transition: linear 0.75s;
    -moz-transition: linear 0.75s;
    -ms-transition: linear 0.75s;
    -o-transition: linear 0.75s;
    transition: linear 0.75s;
}

.toggle.ng-enter {
    opacity: 0;
}

.toggle.ng-enter-active {
    opacity: 1;
}

.toggle.ng-leave {
    opacity: 1;
}

.toggle.ng-leave-active {
    opacity: 0;
}

var app = angular.module("app", ["ngAnimate"]);
app.controller("AppCtrl", function() {
    this.toggle = true;


});
app.animation(".toggle",function(){
    return{
        leave:function(el,done){
            el.text("Nooo!");
            TweenMax.to(el, 1, {opacity: 0});
        },
        enter:function(el, done){
            el.text("Yeeee!");
            TweenMax.from(el,1,{opacity:0})
        }
    }
});

posted @ 2014-08-28 02:19 Zhentiw 阅读(209) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

公告

昵称： Zhentiw
园龄： 13年2个月
粉丝： 41
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Answer1215

[AngularJS] ngAnimate using Javascript. 2

公告

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜