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

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

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

谁能帮助我制作此动画？

解决方法:

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

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

我在图像中添加了类似tinder的属性.这将是我们在模块中定义的指令.

由于您要在更改图像之前淡出图像,因此我们需要在图像源显示新图片之前应用动画.

为此,我们可以使用将绑定到该属性的另一个自定义属性：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;
                });
            }
        };
    });

我们观察属性图片何时发生变化：

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 07005.

标签：angularjs,ionic-framework,ionic,animate-css,javascript
来源： https://codeday.me/bug/20191119/2037323.html