3

是否可以在没有任何 CSS3 或 JavaScript的情况下使用ngAnimate ？假设您只需要切换不透明度，您可以在标记中进行吗？

<div ng-show='foo == 'yes'' ng-animate="show: 'opacity:1', hide: 'opacity:0'" >
</div>
4

1 回答 1

5

浏览器中的动画要么需要通过 (1) 让浏览器的渲染引擎通过 CSS 处理它，要么 (2) 自己使用 JavaScript 控制它。所以，在某个地方，这两件事中的一件需要发生。

也就是说，您可以构建自己的指令，即时构建正确的 CSS 和/或 JavaScript 并将其附加/应用到给定元素，但我相信ngAnimate按照提供的方式使用可能更容易。

第一次进入的例子ngAnimate：

HTML：

<div ng-show="foo == 'yes'" ng-animate="{show: 'fade'}"></div>

CSS：

.enter-fade {
  -webkit-transition: 1s linear opacity;
  -moz-transition: 1s linear opacity;
  -o-transition: 1s linear opacity;
  transition: 1s linear opacity;

  opacity: 0;
}

.enter-fade.enter-fade-active {
  opacity: 1;
}

或者，如果您支持不支持 CSS3 过渡的浏览器，则可以使用 JavaScript 进行过渡：

myModule.animation('fade', function() {
  return { 
    setup : function(element) {
      element.css({'opacity': 0}); 
    },
    start : function(element, done, memo) {
      element.animate({'opacity': 1}, function() {
        done(); 
      });
    }
  };
});

您可以在这些很棒的 Yearofmoo 文章中找到更多信息：

于 2013-04-05T16:28:56.093 回答