标签: angularjs-animation

阻止角度动画在ng-show/ng-hide上发生

在我的AngularJS应用程序中,我使用fontawesome作为我的加载微调器:

<i class="fa fa-spin fa-spinner" ng-show="loading"></i>

Run Code Online (Sandbox Code Playgroud)

我也使用AngularToaster来获取依赖于ngAnimate的通知消息.当我在我的AngularJS应用程序中包含ngAnimate时,它通过以奇怪的方式设置动画来扰乱我的加载旋转器.我想阻止这种情况发生,但是无法找到一种方法来禁用这些加载器上的动画(它也很难更新我的应用程序中的每个加载器).

下面是一个傻瓜,显示我的确切问题.

http://plnkr.co/edit/wVY5iSpUST52noIA2h5a

animation angularjs font-awesome angularjs-animation

Chr*_*ees

lucky-day

45
推荐指数

3
解决办法

1万
查看次数

路线变化的两种不同动画

我有以下情况:我在我的AngularJS应用程序中使用ui-router进行路由.在一个路线中,有五种子状态用于不同的子屏幕.我希望以类似旋转木马的方式为它们之间的过渡制作动画.

导航如下所示:

Link to A | Link to B | Link to C | Link to D | Link to E

Run Code Online (Sandbox Code Playgroud)

从导航state A到state B应该screen A滑出左,screen B从右边滑动; 反之亦然导航state B到state A.

什么工作是与所述屏幕转换transform: translateX(...);上enter,并leave在一个唯一的方向.

通常,我使用ng-class旗帜控制我的动画.但是,在这种情况下,在ui-view元素上设置类根本不起作用(Angular 1.2和ui-router 0.2还不完全兼容).也没有使用自定义指令设置它,scope.$on "$stateChangeStart"在转换开始后触发该指令.

我该如何实现所需的行为？

编辑:解决方案

为了记录:我最终使用自定义$scope函数实现它$state.go(),用于在更改路径之前确定方向.这可以避免$digest already in progress错误.确定动画的类被添加到ui-view父元素中; 这样可以ui-view在正确的方向上激活当前和未来.

控制器功能(Coffeescript):

go: …

Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-animation angular-ui-router

Sam*_* S.

2013 12-09

21
推荐指数

1
解决办法

1万
查看次数

从范围中删除项目时使用AngularJS的ngAnimate

非常简单的问题:在从范围中删除项目时AngularJS 1.2.x,是否可能(以及如何)ngAnimate触发？

这是Plunker的一个例子:

http://plnkr.co/edit/tpl:FrTqqTNoY8BEfHs9bB0f?p=preview

码:

  <body ng-controller="MainCtrl">  
      <div ng-repeat="img in imgs" class="my-repeat-animation">
        <img ng-src="{{img}}" />
        <button class="btn btn-primary" ng-click="remove(img)">DELETE</button>
      </div>
  </body>

Run Code Online (Sandbox Code Playgroud)

脚本:

app.controller('MainCtrl', function($scope) {
     $scope.imgs = ['http://cache.mrporter.com/images/products/362812/362812_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/362807/362807_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/364762/364762_mrp_in_l.jpg', 'http://cache.mrporter.com/images/products/357020/357020_mrp_in_l.jpg']
     $scope.remove = function(image){
       var index = $scope.imgs.indexOf(image);
       $scope.imgs.splice(index,1);
     }
});

Run Code Online (Sandbox Code Playgroud)

正如你所看到的,点击"删除"按钮运行splice()上$scope.imgs.我想动画这个,而不是让它消失.我正在使用刚刚从Moo年份文章中复制粘贴的过渡,这在过滤范围时效果很好,但显然不是从范围中删除时.

javascript angularjs ng-animate angularjs-animation

JVG*_*JVG

lucky-day

7
推荐指数

1
解决办法

5420
查看次数

AngularJS 1.2 ng-show高度动画

我正在尝试使用Angular JS 1.2来运行高度动画.我在这里有一个有关闭项目动画的动画:

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

关键位是这个CSS:

.accordion-body {
  height: 100px;
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
}
.accordion-body.ng-hide-add,
.animate-show.ng-hide-remove {
  display: block !important;
}

.accordion-body.ng-hide-add{
}

.accordion-body.ng-hide-remove{
}
.accordion-body.ng-hide {
  height:0;
}

Run Code Online (Sandbox Code Playgroud)

但我无法弄清楚如何让它开启项目.我显然在做脑死亡 - 我错过了什么？

angularjs angularjs-animation

Ken*_*ith

lucky-day

6
推荐指数

1
解决办法

8848
查看次数

加载期间的角度动画错误

我正在开发这个有角度的简单页面.我正在使用Bower来安装我需要的组件,并且应用程序过去非常有效.直到我决定利用Angular动画库.我第一次使用Bower问我应该使用哪个"合适的"Angular库:1.2.6(已经安装和工作)或1.2.14.

因此,如果我选择1.2.6,则在添加后立即出现错误

var mainApp = angular.module('myStopApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ngAnimate',
  'myStopModule'
])

Run Code Online (Sandbox Code Playgroud)

是

未捕获错误:[$ injector:unpr]未知提供者:$$ asyncCallbackProvider < - $$ asyncCallback < - $ animate < - $ compile

如果我选择其他版本问题转移到代码,它似乎无法识别使用ng-class ..

我有一个ng-class ="testClass"元素和一个列表元素,我有:

ng-click="selectStop(stop); testClass='stop-active'"

Run Code Online (Sandbox Code Playgroud)

我在animations.css中的位置:

.stop-active-add, .stop-active-remove {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;
}

.stop-active-add.add-active,
.stop-active-remove {
  opacity:0;
}

.stop-active-add,
.stop-active-remove.-remove-active {
  opacity:1;
}

Run Code Online (Sandbox Code Playgroud)

在加载页面时我有一个错误说:

[$parse:syntax] Syntax Error: Token '=' implies assignment but [selectStop(stop); testClass] can not be assigned to... …

Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-animation

Iva*_*nn2

2014 03-17

6
推荐指数

1
解决办法

4336
查看次数

如何实现在使用AngularJS动画效果翻转？

什么是实现最好的方式在效果翻转使用AngularJS动画？

我想在上点击效应发生翻转.每次点击它,它应该翻转到另一侧.

理想情况下,我想,我在寻找一个使用角动画一条指令执行.

css3 angularjs angularjs-animation

Mis*_*hko

2018 08-28

6
推荐指数

2
解决办法

1万
查看次数

在AngularJS中同时动画多个对象会产生不连贯的动画

在尝试创建淡入淡出图像的幻灯片时,我遇到了这个问题.我发现,当一次做一个动画时,它们是平滑无缝的.然而,当进行多个动画时,它们会变得不稳定且不稳定.这是我用来淡化一个图像的代码,同时淡出一个重叠的图像(所有这些都发生在一个指令中):

var fadeToNextImg = function() {
    var nextImg = imageHandler.getNextImage();
    $animate.addClass(curImage, 'ng-hide');
    $animate.removeClass(nextImg, 'ng-hide');
    curImage = nextImg; 
};

Run Code Online (Sandbox Code Playgroud)

这样可行,但动画会产生不稳定的结果.图像不会平滑地淡入淡出,而只是出现,或者有时其中一个图像会褪色.但是,如果我嵌套动画以便一次只发生一个动画,那么两个动画都会完美地完成,一个接着一个,就像这样:

var fadeToNextImg = function() {
    var nextImg = imageHandler.getNextImage();
    $animate.addClass(curImage, 'ng-hide', function() {
        $animate.removeClass(nextImg, 'ng-hide');
        curImage = nextImg;
    });
};

Run Code Online (Sandbox Code Playgroud)

这太好了......只是没想达到我想要的效果.我希望一个图像淡出,而另一个图像无缝淡入其中!难道我做错了什么？或者这是Angular Animate库中的错误/性能问题？

另一件需要注意的事情,我也尝试使用指令之外的JQuery DOM操作,动画完美无瑕.我只是将它移动到一个指令,因为这是一种有意义的做事方式.那为什么它会增加我的动画呢？

angularjs angularjs-directive angularjs-animation

Mat*_*t.M

lucky-day

6
推荐指数

1
解决办法

704
查看次数

如何在AngularJs中执行jQuery动画,如淡入和淡出

我是AngularJs的新手,所以我需要做以下事情:

我有一个div和一个按钮,当我点击按钮进行ajax调用时我想要当我完成时我想做:

删除div.
或者添加新的.

我想学习如何使用jQuery动画(slideUp和slideDown)来完成它们(当然不是同样的点击).

jquery angularjs angularjs-animation

Dab*_*bas

2014 09-08

6
推荐指数

1
解决办法

7659
查看次数

动画滑动div反弹而不是平滑地出现/消失

我的应用程序中有一个导航栏和一个子导航栏.在子栏中,可以按下按钮,我希望此按钮打开一个新的子栏,隐藏原始栏.

新的子栏应从主栏后面滑动并隐藏第二个栏.

问题是:

当第三个条形出现时,它会反弹而不是平滑
当第三个柱子消失时,它就会消失,并且不会像我期望的那样向后滑动

我试着玩top物业认为它可以解决问题,但事实并非如此.

我在这里附上片段.或者你可以在jsfiddle中查看它

angular.module('myapp.controllers', []);

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

angular.module('myapp.controllers').controller("BarController", function ($scope) {
    $scope.showActionsBar = false;

    $scope.cancelAction = function () {
        $scope.showActionsBar = false;
    }

    $scope.click = function () {
        $scope.showActionsBar = true;
    }
});

Run Code Online (Sandbox Code Playgroud)

.navbar-deploy {
    background-color: red;
    border: solid transparent;
}

.third, .sub-navbar-fixed {
    background-color: black;
    width: 100%;
    height:60px;
    padding-top: 18px;
    margin-bottom: 0px;
    z-index: 1000;
    color: white;
}

.actions-bar {
    top: 40px;
    background-color: yellow;
    position: fixed;
    padding-left: …

Run Code Online (Sandbox Code Playgroud)

html javascript css angularjs angularjs-animation

Avi*_*Avi

lucky-day

5
推荐指数

1
解决办法

718
查看次数

在flexbox计算高度后渲染传单地图

我试图在一个灵活的孩子中绘制一个占据剩余空间的地图.

我在主要内容的顶部有几个标题,其中一个横幅有时隐藏/删除,所以我使用flexbox,以便标题可以消失,而不会影响其他元素的位置.当我使用绝对位置时,IE不能正常工作.

我的问题是,在Flexbox计算了地图div的高度之前,传单似乎正在计算地图视口.

例:

这是一张传单的截图,认为地图的高度比它应该的要小.

如果我检查元素高度是否正确.此外,如果我将计时器放入并强制使用传单使地图大小无效,则地图将重新渲染到正确的高度.

HTML:

<body>
  <div class="header">
      Header
  </div>

  <div class="banner">
      Banner
  </div>

  <main class="main">
    <div class="nav">
      <strong>Navigation</strong>
    </div>

    <div id="map" class="map-content"></div>   
  </main>


    <script src="script.js"></script>
  </body>

Run Code Online (Sandbox Code Playgroud)

CSS:

html, body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.header {
    height: 50px;
    background-color: grey;
    color: white;
}

.banner { 
    height: 50px;
    background-color: lightgrey;
    color: white;
}

.main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
}

.map-content {
   flex: 1 1 auto;
}

.nav { …

Run Code Online (Sandbox Code Playgroud)

css flexbox angularjs leaflet angularjs-animation

los*_*ion

2016 04-04

5
推荐指数

2
解决办法

1269
查看次数