2015-04-03 74 views
0

我一直在谷歌和Stackoverflow上搜索,但还没有找到我在找什么。模型更改时的AngularJS动画

这是我的。我保证我正在做出真诚的努力来弄清楚这一点。

问题如下:我有动画使用列表。当我使用超时将项目添加到列表中时,它们会正确地进行动画。但是,“title”变量是一个字符串。我想在此值更改时应用动画。坦白地说,我现在仍然无能为力,如何才能实现这一目标。我明白我可以为ng-hide的动画添加css类,但我仍然不太明白如何在这里适合。提前感谢任何帮助。请赐教。你不必给我代码。即使是关于如何实现这一点的高层次描述也足够了。

// app.js 
(function() { 
    var app = angular.module("MyApp", ["ngAnimate"]); 
    // route configuration 
}()); 

// homecontroller.js 
(function() { 
    var app = angular.module("MyApp"); 
    app.controller("HomeController", ["$scope","$timeout", homeController]; 

    function homeController($scope, $timeout) { 
    $scope.items = ["Frodo", "Bilbo", "Merry", "Pippin", "Sam"]; 
    $scope.title = "The Hobbits"; 

    $timeout(function() { 
     $scope.title = "The Hobbits and the Wizard"; 
     $scope.items.unshift("Aragorn","Faramir","Boromir"); 
    }, 5000); 
    } 
}()); 

一些HTML

<!-- view for HomeController --> 
<h1>{{ title }}</h1> 
<div ng-controller="HeaderWebpart.HeaderController"> 
    <div class="testClass" style="display:block;" ng-repeat="item in items">{{ item }}</div> 
</div> 

和CSS

div.testClass.ng-enter { 
    -webkit-animation: enter 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    animation: enter 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
    display: block; 
    position: relative; 
} 
@-webkit-keyframes enter { 
    from { 
     opacity: 0; 
     height: 0px; 
     left: -70px; 
    } 
    75% { 
     left: 15px; 
    } 
    to { 
     opacity: 1; 
     height: 20px; 
     left: 0px; 
    } 
} 
div.testClass.ng-enter-active { 
    opacity: 1; 
} 
+0

此网站可能会对您有所帮助:http://daneden.github.io/animate.css/。正如你所看到的,当实际的动画运行时,有一个'.animate'类。另外,还有一个'.infinite'类可以被添加来不断重复动画(不超过设定的时间)。 – dward 2015-04-03 20:28:27

+0

谢谢你张贴这个 - SUPER有帮助。 – Beebunny 2015-04-05 07:13:28

回答

1

您目前有没有任何适用的动画逻辑来<h1>元素,只需在控制器内将值分配给title不足够。

如果您查看角动画文档 https://docs.angularjs.org/api/ngAnimate - 您会看到只有一组特定的指令具有动画挂钩。每个指令通常都有一个输入/离开或添加/删除动画的配对。这意味着角添加和删除特定的CSS类这些元素,你可以用它来执行与动画,类似于你已经与ng-repeat指令完成,testClass动画上面:

.yourAnimationCSSClass.ng-enter { } 
    => what your element should look like before the animation starts 
     what the change should be and the duration 

.yourAnimationCSSClass.ng-enter.ng-enter-active { } 
    => ending(stable) state for your animation, ie. what the 
     element should look like when you're done 

... ng-leaveng-leave-active工作类似。

因此,为了解决这个问题,您可以使用ngClass来选择设置一个CSS类。这最终与Angular开发人员指南中的Class and ngClass animation hooks示例非常接近,因此请查看该示例。

+0

通常可以使用ngClass =“title!=''?'myAnimationCSSClass':''”','ngIf =“title!=''”'或'ngShow =“来创建一些次要的模板魔法。 title!=''“'让你的代码更加简洁一些,或者如果你已经定义了一些动画钩子,可以使用不同的动画钩子,但是每个人都可能不理解这种方法。尽管如此,其中的任何一项都应该允许您只写入控制器中的作用域变量并应用动画而不手动触发它。 – orbitbot 2015-04-03 21:59:33

+0

orbitbot - 谢谢你的回应。与其他人说的一起使用。干杯。 :d – Beebunny 2015-04-05 07:12:59