CSS3 - 通过添加类名完成动画后回调答案

【问题标题】：CSS3 - call back after animation done by adding class nameCSS3 - 通过添加类名完成动画后回调
【发布时间】：2015-06-13 15:59:52
【问题描述】：

添加className完成动画后如何在angular中回调函数调用？

这是我的代码：

var myApp = angular.module('myApp', []);
myApp.controller('count', function($scope) {
    $scope.animate = function () {
        $('h2').addClass('fade'); //adding animation 1s
        //opcity done how to put a call back?
        $scope.done = function () { //call after 1s..?
            console.log('done');
        }
    }
});

<div class="container" ng-app="myApp">
    <div class="content" ng-controller="count">
        <h1 ng-click="animate()">Click ME</h1>
        <h2>Let me Fade</h2>
    </div>
</div>

jsfiddle

【问题讨论】：

我所知道的是 jquery 无法捕捉到 css 中发生的动作 .. 所以你不能通过 addClass 来检查
好的，你能告诉我正确的方法吗？ - 更新我的小提琴

标签： jquery angularjs css

【解决方案1】：

既然你标记了 jQuery，那么如何从 jquery 中使用它，比如 $(selector).fadeOut(speed,easing,callback) 其中 speed 你可以做“快”或“慢”或定义 milisec easing速度增量无论是恒定的“线性”还是“摆动”结束时更快，然后是 回调函数，请参阅此article

var myApp = angular.module('myApp', []);

myApp.controller('count', function($scope) {
    $scope.animate = function () {
        $scope.done = function () { //call after 1s..?
            console.log('done');
        }
        $('h2').fadeOut("slow","linear", $scope.done)
    }
});

这里jsfiddle为您服务

编辑：

这里是 angularjs 方法 jsfiddle 给你，但这不是我的。我学会了here

【讨论】：

是的，我同意。作品。但我想这不是angular 方法，因为我与jquery 混合。求知识你能告诉我angular的方法吗？
@user2024080 更新了我的答案，但实际上它有点复制粘贴我在我的项目中仍然使用 angularjs 时学到的东西。我非常想念angularjs
看来你的小提琴不起作用。切换到其他框架？ - 那是什么？还是留给其他平台？
@user2024080 嗯，奇怪，它确实有效。这是 angularjs 指令你不知道吗？你点击了哪一个？我修改了你的大声笑