离子框架 animate.css slideInUp 和 SlideOutUp 动画不起作用答案

【问题标题】：Ionic Framework animate.css slideInUp and SlideOutUp animation not working离子框架 animate.css slideInUp 和 SlideOutUp 动画不起作用
【发布时间】：2015-10-14 03:02:17
【问题描述】：

我有一个类似 tinder 的单一视图，看起来像

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

谁能帮我制作这个动画？

【问题讨论】：

问题是什么？还是问题？
@leo.fcx 我已经更新了上面的问题。基本上我正在将 animate.css 库与 ionic 集成，并且集成不起作用。
对答案的任何反馈将不胜感激。

标签： javascript angularjs ionic-framework ionic animate.css

【解决方案1】：

您可以创建某种自定义directive 并使用$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);

这就是它的样子

这是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：我已经包含了animate.css 并使用了它的动画。

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

【讨论】：