javascript - ionic 框架 animate.css slideInUp 和 SlideOutUp 动画不工作

Question

我有一个像 tinder 这样的单一 View

<div class="list card animated slideInUp current-image-item">
   <img src="{{imageSource}}">
   <button ng-click="sendFeedback(true)"> ClickMe </button>
</div>

当我单击此按钮时，当前(唯一一张卡片)应该上升并淡出。而且，我将更新 Controller 中 sendFeedback() 函数中的 imageSource 以指向另一个 url。然后保存 div 应该从下到上滑入。

我正在使用 animate.css 库来执行 slideInUp 并在 sendFeedback() 中添加类似的内容。

var element = angular.element(document.querySelector('.current-image-item'));
element.addClass('fadeOutUp');
element.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
   var randomItem = Math.round(Math.random() * ($scope.feed.length - 1));
   element.removeClass('fadeOutUp');

   // update current song in scope
   $scope.imageSource = "http://google.com/img.png";
});

谁能帮我制作这个动画？

Answer 1

您可以创建某种自定义 directive并使用 $animate 将 animate.css 动画应用于您的图像:

<img src="{{imageSource}}" tinder-like>

我已经为我的图片添加了 tinder-like 属性。这将是我们在模块中定义的指令。

由于您想在图像发生变化之前淡出图像，因此我们需要在图像源显示新图片之前应用动画。

为此，我们可以使用另一个将绑定(bind)到属性的自定义属性:imageSource。

<img picture="{{imageSource}}" ng-src="" tinder-like>

I've used the name picture but it could have been anything else.

现在指令:

angular.module('app.directives', [])

    .directive('tinderLike', function($animate){
        var oldsource = "";
        return {
            restrict: 'A',
            link: function(scope, element, attrs){
                attrs.$observe('picture', function(value) {
                    if (oldsource !== value) {
                        $animate.addClass(element, 'animated fadeOutUp')
                            .then(function () {
                                $animate.removeClass(element, 'animated fadeOutUp');
                                return value;
                            })
                            .then(function(source){
                                attrs.$set('src', source);
                            });
                    }
                    oldsource = value;
                });
            }
        };
    });

我们观察属性 picture 何时发生变化:

attrs.$observe('picture', function(value) { 

})

如果值发生变化(我们使用变量 oldsource 来跟踪)，我们使用 $animate 向我们的元素添加一个类:

$animate.addClass(element, 'animated fadeOutUp')

$animate.addClass 返回 promise解决后，将允许我们删除之前添加的类:

$animate.removeClass(element, 'animated fadeOutUp')

最后要做的是设置图像的来源:

attrs.$set('src', source);

这是它的样子

这是 plunker .

如果我们想在图片变化时应用动画，我们的指令会简单得多:

.directive('tinderLike', function($animate){
    var source = "";
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            attrs.$observe('src', function(value) {
                if (source !== value) {
                  $animate.addClass(element, 'animated slideInUp')
                    .then(function () {
                      $animate.removeClass(element, 'animated slideInUp');
                    });
                }
                source = value;
            });
        }
    };
});

因为可以直接观察到我们图片的src属性。

这是 plunker对于这个其他解决方案。

PS: I've included animate.css and use its animations.

PPS: I've used a services which fetches random images from http://api.randomuser.me.