CSS 转换使用 AngularJS ng-show
CSS Transitions using AngularJS ng-show
所以我正在尝试为一些 bootstrap 徽章创建幻灯片效果,我使用 AngularJS
来显示一些 sub-categories
我有两种类别,parent 和 child。当我单击 parent 时,我想显示 parent 的 child 类别,如果它们已经显示则隐藏它们。
我正在使用 ng-show 指令来执行此操作。我遇到的问题是,当我想使用 CSS 过渡将这些 sub-categories 滑入和滑出时,动画不会显示,它只是显示或隐藏它们。就像动画没有机会发生一样,因为 show/hide 指令是 over-riding 过渡。
这里是 html:
<div ng-controller="MainController">
<ul ng-repeat="category in categories">
<li ng-if="category.category_type=='parent'" ng-show="category.category_show">
<span class="badge badge-p" ng-click="updateResults(category)">{{category.category_name}}</span>
</li>
<li ng-if="category.category_type == 'child'" ng-show="category.category_show">
<span class="badge badge-c badge-slider">{{category.category_name}}</span>
</li>
</ul>
</div>
这是相关的 CSS 转换和 .ng-hide 内容:
.ng-hide-add, .ng-hide-remove {
display: block !important;
}
.badge-slider {
max-height: 100px;
-webkit-transition: max-height linear 0.5s;
-moz-transition: max-height linear 0.5s;
-o-transition: max-height linear 0.5s;
transition: max-height linear 0.5s;
}
.badge-slider.ng-hide {
max-height: 0px;
}
这里有一个 plnkr,所以你可以看到我正在做的一个非常非常简化的版本是如何工作的:http://plnkr.co/edit/PEAxMV1SA0Wk6fpNhJH4
非常感谢任何帮助!
我已经 fork 了一个 new plunker 的工作版本。
我需要将 badge-slider
class 添加到具有 ng-show 属性的实际元素中:
<li ng-if="category.category_type == 'child'" ng-show="category.category_show" class="badge-slider">
然后我将 overflow:hidden
添加到 .badge-slider
规则:
.badge-slider {
max-height: 100px;
-webkit-transition: max-height linear 0.5s;
-moz-transition: max-height linear 0.5s;
-o-transition: max-height linear 0.5s;
transition: max-height linear 0.5s;
overflow:hidden;
}
所以我正在尝试为一些 bootstrap 徽章创建幻灯片效果,我使用 AngularJS
来显示一些 sub-categories我有两种类别,parent 和 child。当我单击 parent 时,我想显示 parent 的 child 类别,如果它们已经显示则隐藏它们。
我正在使用 ng-show 指令来执行此操作。我遇到的问题是,当我想使用 CSS 过渡将这些 sub-categories 滑入和滑出时,动画不会显示,它只是显示或隐藏它们。就像动画没有机会发生一样,因为 show/hide 指令是 over-riding 过渡。
这里是 html:
<div ng-controller="MainController">
<ul ng-repeat="category in categories">
<li ng-if="category.category_type=='parent'" ng-show="category.category_show">
<span class="badge badge-p" ng-click="updateResults(category)">{{category.category_name}}</span>
</li>
<li ng-if="category.category_type == 'child'" ng-show="category.category_show">
<span class="badge badge-c badge-slider">{{category.category_name}}</span>
</li>
</ul>
</div>
这是相关的 CSS 转换和 .ng-hide 内容:
.ng-hide-add, .ng-hide-remove {
display: block !important;
}
.badge-slider {
max-height: 100px;
-webkit-transition: max-height linear 0.5s;
-moz-transition: max-height linear 0.5s;
-o-transition: max-height linear 0.5s;
transition: max-height linear 0.5s;
}
.badge-slider.ng-hide {
max-height: 0px;
}
这里有一个 plnkr,所以你可以看到我正在做的一个非常非常简化的版本是如何工作的:http://plnkr.co/edit/PEAxMV1SA0Wk6fpNhJH4
非常感谢任何帮助!
我已经 fork 了一个 new plunker 的工作版本。
我需要将 badge-slider
class 添加到具有 ng-show 属性的实际元素中:
<li ng-if="category.category_type == 'child'" ng-show="category.category_show" class="badge-slider">
然后我将 overflow:hidden
添加到 .badge-slider
规则:
.badge-slider {
max-height: 100px;
-webkit-transition: max-height linear 0.5s;
-moz-transition: max-height linear 0.5s;
-o-transition: max-height linear 0.5s;
transition: max-height linear 0.5s;
overflow:hidden;
}