关于angular的js动画执行问题,菜鸟求教。

发布于 2022-09-03 08:11:28 字数 2858 浏览 21 评论 0

刚接触angular的animate,自己写了个animate试了试,出了点问题,先上代码..

var animate = angular.module('phoneAnimations', []);
animate.animation('.phoness', function() {    //这个是给ngview用的
    return {
        enter: function(element, done) {
            element.css({
                opacity: 0.5,
                position: "relative",
                top: '100px',
                left: '200px'
            }).animate({
                top: 0,
                left: 0,
                opacity: 1
            }, 1000, done)
        }
    }
})


animate.animation('.repeat-animation', function () {    //这个是给那个repeat用的
  return {
    enter : function(element, done) {
      console.log("entering...");
      var width = element.width();
      element.css({
        position: 'relative',
        left: '-100px',
        opacity: 0
      });
      element.animate({
        left: 0,
        opacity: 1
      }, done);
    },
    leave : function(element, done) {
      element.css({
        position: 'relative',
        left: 0,
        opacity: 1
      });
      element.animate({
        left: '-100px',
        opacity: 0
      }, done);
    },
    move : function(element, done) {
      element.css({
        left: "50px",
        opacity: 0.5
      });
      element.animate({
        left: "0px",
        opacity: 1
      }, done);
    }
  }
});

代码如上,出现的问题是:ngview的动画可以实现,但是那个repeat的就无效,切换、筛选的时候也无效,只有把第一个动画,也就是ngview的注销掉就可以正常出现动画,这个是为什么?

还有一个问题是:使用angular的css动画的时候,也是设置了ngview和ngrepeat的动画,但是刚刷新的时候却只有ngview的动画会执行,有没有办法控制哪个先执行? 或者让刷新的时候执行ngrepeat的动画呢?
两个问题,初学者请多多保函。

还有个官方phone-cat案例源码中一段关于动画的,不打理解,接着上码

angular.
  module('phonecatApp').
  animation('.phone', function phoneAnimationFactory() {
    return {
      addClass: animateIn,
      removeClass: animateOut
    };

    function animateIn(element, className, done) {
      if (className !== 'selected') return;

      element.css({
        display: 'block',
        position: 'absolute',
        top: 500,
        left: 0
      }).animate({
        top: 0
      }, done);

      return function animateInEnd(wasCanceled) {
        if (wasCanceled) element.stop();
      };
    }

    function animateOut(element, className, done) {
      if (className !== 'selected') return;

      element.css({
        position: 'absolute',
        top: 0,
        left: 0
      }).animate({
        top: -500
      }, done);

      return function animateOutEnd(wasCanceled) {
        if (wasCanceled) element.stop();
      };
    }
  });

HTML是这样的

<div class="phone-images">
  <img ng-src="{{img}}" class="phone"
      ng-class="{selected: img === $ctrl.mainImageUrl}"
      ng-repeat="img in $ctrl.phone.images" />
</div>

我不太理解这是怎么判断是增加还是移除类名的? 难道开始的return{addclass 和 removeClass这样就可以?这不是自定义的属性名?}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

清风夜微凉 2022-09-10 08:11:28

怎么没人回答啊,大神哪去了?心好累啊

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文