3

HTML：

.popup
  .notification(ng-show="showNow", ng-animate="{show: 'animate-enter'}")
     | Notification text

CSS：

.popup
  .notification
    transition-duration 3s
    transition-timing-function ease
    transition-property all
    opacity 0
    position: absolute;
    width: 250px;
    left: 200px;
    top: 110px;
    z-index: 9;
    background: darkorange;
    padding: 1rem 1rem;
    color #FFF
    line-height 1.5
    transform translateY(0px)

.popup
  .notification.animate-enter-start
    opacity 1
    transform translateY(-10px)

我正在尝试为弹出窗口设置动画，使其淡入淡出。淡入有效，但在淡入动画播放后它又再次淡出。如何让它保持淡入淡出？

小提琴：

http://jsfiddle.net/6Xyys/

4

2 回答 2

3

你的 CSS 是问题所在。

您需要将最终属性设置为永久类.popup .notification。然后，您需要在活动类设置初始参数，然后再次在开始类设置最终参数。

你需要这样做，因为类animate-enter和animate-enter-start动画之后会被移除，所以最终的属性需要在.popup .notification类中。因此，您需要在此类中将不透明度设置为 1。

给我们一个小提琴，我们可以更好地帮助你。

永久类：

.popup
  .notification
    opacity 1;
    position: absolute;
    width: 250px;
    left: 200px;
    top: 110px;
    z-index: 9;
    background: darkorange;
    padding: 1rem 1rem;
    color #FFF
    line-height 1.5
    transform translateY(-10px)

设置类：

.popup
  .notification.animate-enter-setup
    transition-duration 3s
    transition-timing-function ease
    transition-property all
    opacity 0
    transform translateY(0px)

开始动画课：

.popup
  .notification.animate-enter-start
    opacity 1
    transform translateY(-10px)

在此站点上查看一些示例： ng-animate move sample

于 2013-07-03T11:21:19.680 回答
0

以上所有小提琴都不适用于最新的角度。为 Angular 1.4 更新了它们。http://jsfiddle.net/rsarosh/npzLLwL1/3/

HTML

<script src="http://code.angularjs.org/1.4.0/angular.js"></script>
<script src="http://code.angularjs.org/1.4.0/angular-animate.js"></script>
<script>
  angular.module('app', ['ngAnimate']);

</script>
<div ng-app="app" class="popup">
  <button ng-click="showNow = true">activate</button>
  <div ng-if="showNow" class="notification">
    <div>Some sample text</div>
  </div>
</div>

CSS

.popup .notification {
  position: absolute;
  width: 250px;
  left: 200px;
  top: 110px;
  z-index: 99;
  background: #ff8c00;
  padding: 1rem 1rem;
  color: #fff;
  line-height: 1.5;
  opacity: 1;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
}

.notification.ng-enter {
  opacity: 0;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  transition-duration: 10s;
  transition-timing-function: ease;
  transition-property: all;
}

.notification.ng-enter-active {
  opacity: 1;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
}

阅读更多http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

于 2016-01-28T03:03:29.703 回答