试图了解使用关键帧

AngularJs动画过我在新的角度，我没有用CSS3很多经验（我是一个后端开发！）试图了解使用关键帧

我想了解如何角管理定制用css3关键帧过渡。

我得到这个：

在我的标记：

$scope.test = false; 
// ... doing some things that takes more than 3-4 seconds 
$scope.test = true;

，并在我的CSS：

#welcome-container.ng-hide { 
    animation:1s mycustomkeyframe; 
    -webkit-animation:1s mycustomkeyframe; 
} 

@keyframes mycustomkeyframe { 
    from { opacity: 1; } 
    to { opacity: 0; } 
} 

@-webkit-keyframes mycustomkeyframe { 
    from { opacity: 1; } 
    to { opacity: 0; } 
}

我得到这个例子

<div id="welcome-container" ng-hide="test"> 
... 
</div>

在我的控制器

使用ng-hide-add和ng-隐藏类，但我真的迷失在关键帧。我的代码隐藏了div，但它没有做任何动画！我想用关键帧来做jquery式的弹性缓动转换（没有jquery：P）

任何人都可以帮助我吗？

来源

2014-01-15 SergiGP

之前从未使用角度，但从CSS的角度来看，您的div上没有类别隐藏。

<div id="welcome-container" class="ng-hide" ng-hide="test"> 
Here is a bunch of text blah 
</div>

JsFiddle

来源

2014-01-15 16:15:38 Charles380

AngularJS和CSS3是2个完全不同的东西

角可以用于一个CSS类附着在容器

和之后。基于新的CSS类。你可以从CSS

$scope.my_css_clas = 'demo_classs' 

<div ng-class="{{ my_css_clas }}">

类触发动画开始在角连接与ng-class

来源

2014-01-15 16:42:45

-1

我认为这是不可能的，关键帧动画NG-hide指令在当前版本中。

您必须使用另一个类进行动画制作，然后在动画结束时执行隐藏动作或使用另一个ng-directive，如ng-leave。

来源

2014-01-15 18:12:05 SergiGP

试图了解使用关键帧

回答

相关问题