Question

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/

Answer 1

你的CSS就是问题。

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

您需要执行此操作，因为动画后将删除类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

Answer 2

所有上述小提琴都不适用于最新的棱角分明。为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

Angularjs ng-animate fadein但它消失了？

2 个答案: