标签: angularjs-animation

我正在尝试通过组合对addClass/removeClass的调用来制作动画序列.

在动画结束后,调用"removeClass"来删除动画并启动一个新动画.但由于某种原因,没有任何反应.我想弄清楚它为什么不起作用？为什么不删除课程？

$animate.addClass(element, 'fadeInDown').then(function() {
    $animate.removeClass(element, 'fadeInDown'); // why is it not working?
    $animate.addClass(element, 'fadeOutDown');
});

完整版可以在这里找到

http://plnkr.co/edit/EFybfU4jcZoT3S7jCpM8?p=preview

与jquery相比,我发现以角度制作动画非常困难.有很多版本的角度动画fadein和fadeout,我从博客/教程/等找到它们,其中一些版本是旧版本的角度.当Angular的更新版本出现以取代旧版本时,它似乎非常不一致.我看不到任何标准的做法.因此我不知道从哪里开始.

我只是在单击按钮时淡入表单或html文档.

HTML,

<button ng-click="loadInclude" >Load Include Form</button>
<div ng-include="'form.php'" ng-if="readyToLoadForm===true"></div>

棱角分明,

   var app = angular.module("myapp", ['ngAnimate']);

   app.controller("FormController",function($scope) {

            $scope.readyToLoadForm = false;
            $scope.loadInclude = function(e) {
                $scope.readyToLoadForm = true;
            };
        }
    );

有任何想法吗？

如何使用AngularJS启用不同的过渡.让我们说,我的网络应用程序中有一个侧边栏.我用户点击按钮X,侧边栏应该很快消失,如果用户点击另一个按钮,侧边栏应该慢慢消失.

我认为,这可以通过在其中一次点击之后设置转换选项值然后更改侧边栏的可见性状态(由转换指令监视)来实现.

但这对我来说似乎有点糟糕.有一个共同的方法来做到这一点？

摇摆不定的动画很棒!但是如果没有用户交互,我就无法工作.

总正常ng重复列表:

<div ng-controller="controller">    
    <div class="category" ng-repeat="category in categories">
      {{category}}
    </div>
</div>

在控制器中定义:

var controller = function($scope) {
  $scope.categories = ['12345', '6789', '9876', '54321'];
};

还有一些CSS动画规则:

.category.ng-enter {
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
  opacity:0;
}
.category.ng-enter-stagger {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}
.category.ng-enter.ng-enter-active {
  /* standard transition styles */
  opacity:1;
}

但在页面加载时它显示没有动画.我插入了一个用随机数替换categories数组的按钮,它就会很好地消失.

当用户第一次访问该页面时,我需要做些什么才能使动画正常工作？

演示在这里:http://plnkr.co/edit/3zXENPbYA3cxJQ3Pyb34？p = preview

我找到了一些黑客攻击的答案,$timeout()但我只在第一项上获得动画.它感觉不舒服.

我写了一个名为'cardViewer'的角度指令,它可以用动画显示其中的图像.

按"上一步"按钮时,图像向左滑动.按"下一步"按钮时,图像向右滑动.

我尝试这样做ng-switch,只支持.ng-enter和.ng-leave动画类.但是我需要两种方式进入(从左和右进入),两种方式离开(左和右).

所以我试着ng-class解决这个问题.我希望它可以toLeft在切换之前添加类,因此它可以应用特定的css动画.

但它似乎无法正常工作.当我按两次"下一步"按钮时,它工作正常.但是当我按下"下一步",然后按"上一步",新图像进入正确方向,但旧图像离开方向错误.

我的指令模板:

<h1>hahaha</h1>
  <div>
    <button ng-click='prev()'>prev</button>
    <button ng-click='next()'>next</button>
  </div>
<div>current Card Index: {{displayCard}}</div>

<div class="card-container" ng-switch="displayCard">
<img class="card"
   src="http://i.imgur.com/EJRdIcf.jpg" ng-switch-when="1" 
   ng-class="{'toLeft': toLeft, 'toRight': toRight}"/>
<img class="card"
   src="http://i.imgur.com/StaoX5y.jpg" ng-switch-when="2" 
   ng-class="{'toLeft': toLeft, 'toRight': toRight}"/>
<img class="card"
   src="http://i.imgur.com/eNcDvLE.jpg" ng-switch-when="3" 
   ng-class="{'toLeft': toLeft, 'toRight': toRight}"/>
</div>

指示:

angular.module('app', ['ngAnimate'])
  .directive('cardViewer', function() {

  return {
    templateUrl: 'cardViewer.html',
    link: function(scope, element, attr) {
      scope.toLeft = false;
      scope.toRight = false;

      scope.displayCard = 1;

      //when …