angularjs之可以在不定义 CSS3 类或 JavaScript 的情况下使用 ngAnimate 吗

是否可以使用 ngAnimate没有任何 CSS3 或 JavaScript？比方说，如果您只需要切换不透明度，您可以在标记中进行吗？

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

请您参考如下方法:

浏览器中的动画需要通过 (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 文章中找到更多信息:

• Animation in AngularJS
• Enhanced Animation in AngularJS