Ionic Framework animate.css slideInUp和SlideOutUp动画不起作用

Question

我有一个看起来像火种的单一视图

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

当我单击此按钮时，当前（唯一的卡）应该上升并淡出。 并且，我将更新控制器中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

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

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

我为我的图像添加了一个tinder-like的属性。 这将是我们模块中定义的指令。

由于您希望在图像更改之前fade-out图像，我们需要在图像源显示新图片之前应用动画。

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

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

我已经使用了名称picture但它可能是其他任何东西。

现在指令：

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);

这就是它的样子

这就是掠夺者 。

如果我们想在图片更改时应用动画，我们的指令会更加简单：

.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属性。

这是其他解决方案的吸收者。

PS：我已经包含了animate.css并使用了它的动画。

PPS：我使用了从http://api.randomuser.me获取随机图像的服务。