使用 angular 动画添加滑入和滑出动画 (ng-show)
Adding slide in and out animations with angular animation (ng-show)
所以我有两组 4 个按钮。一次只能通过 ng-show 表达式显示一组按钮。我在使用 angular 动画 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;
}
所以我有两组 4 个按钮。一次只能通过 ng-show 表达式显示一组按钮。我在使用 angular 动画 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;
}