Question

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

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

Answer 1

浏览器中的动画需要通过以下方式实现：（1）让浏览器的渲染引擎通过CSS处理它，或者（2）用JavaScript自己控制它。所以，在某个地方，这两件事中的一件需要发生。

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

第一次进入ngAnimate的人的一个例子：

HTML：

ngAnimate

CSS：

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

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

.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;
}

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

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

1 个答案: