添加带角度动画的滑入和滑出动画(ng show)
Adding slide in and out animations with angular animation (ng-show)
所以我有两组4个按钮。ng-show表达式一次只能显示一组按钮。我很难使用角度动画css来创建ng show add上的幻灯片和ng show remove上的幻灯片。这是我的代码:
<script>
angular.module('myApp', ['ngAnimate']).
controller('theController', ['$scope', function($scope) {
$scope.imageAnalysis = false;
$scope.toggleImageBtns = function() {
$scope.imageAnalysis = !$scope.imageAnalysis;
};
}]);
<script>
<body>
<div class="container" ng-controller="theController">
<div class="row feature-btns" ng-show="imageAnalysis === false">
<div class="col-xs-3">
<div class="btn btn-default"> feature btn 1 </div>
</div>
<div class="col-xs-3">
<div class="btn btn-default"> feature btn 2 </div>
</div>
<div class="col-xs-3">
<div class="btn btn-default"> feature btn 3 </div>
</div>
<div class="col-xs-3">
<div class="btn btn-default" ng-click="toggleImageBtns()"> click me to see image buttons </div>
</div>
</div>
<!-- /.row -->
<div class="row image-btns" ng-show="imageAnalysis === true">
<div class="col-xs-3">
<div class="btn btn-default"> image btn 1 </div>
</div>
<div class="col-xs-3">
<div class="btn btn-default"> image btn 2 </div>
</div>
<div class="col-xs-3">
<div class="btn btn-default"> image btn 3 </div>
</div>
<div class="col-xs-3">
<div class="btn btn-default" ng-click="toggleImageBtns()"> go back to feature buttons </div>
</div>
</div>
</div>
</body
这里有一个CSS片段,它将从右边滑入按钮。它应该让您了解需要使用和可以操作的类。
.feature-btns {
position: absolute;
top: 50px;
left: 0;
transition: 250ms ease-in-out all;
}
/* fade out content as it is hidden */
.feature-btns.ng-hide-add {
opacity: 1.0;
}
.feature-btns.ng-hide-add-active {
opacity: 0;
}
/* slide in from right*/
.feature-btns.ng-hide-remove {
left: 100%;
//left: 1100px;
position: absolute;
top: 50px;
}
.feature-btns.ng-hide-remove-active {
left: 0;
}
.image-btns {
position: absolute;
top: 50px;
left: 0;
transition: 250ms ease-in-out all;
}
/* fade out content as it is hidden */
.image-btns.ng-hide-add {
opacity: 1.0;
}
.image-btns.ng-hide-add-active {
opacity: 0;
}
/* slide in from right*/
.image-btns.ng-hide-remove {
left: 100%;
//left: 1100px;
position: absolute;
top: 50px;
}
.image-btns.ng-hide-remove-active {
left: 0;
}
相关文章:
- 有棱角的ng显示与动画.css
- Fire$ng在承诺实现后动画输入
- 如何在angularjs中使用ng repeat动画
- ng设置动画以创建slideIn/slideOut过渡
- ng使用ui视图制作动画
- 如何在使用$http缓存时重新触发ng-if/ng显示动画
- 使用AngularJS在ng重复中从一个状态到另一个状态制作动画
- ng如果初始动画不使用自定义指令
- ng重复's动画;在同一元素上使用ngInclude时不起作用
- 使用 class、ng-show 和 ng-class 执行 AngularJS 动画
- 角度ng-animate导致模型上的奇怪动画更改
- ng-重复与限制到当限制下降时向后动画
- 在路由配置中定义 AngularJS 中的 ng-view 动画
- ng-animate 不允许动画完成
- 角度 1.2 |ng动画 |以编程方式阻止动画
- 如何相对于导致更改的单击事件对 ng 重复项进行动画处理
- AngularJs:如何在值变化时启动动画(ng-scope)
- 使用| AngularJS, ngAnimate来动画ng-repeat的子元素
- 使用AngularJS制作按钮动画ng重复
- 添加带角度动画的滑入和滑出动画(ng show)