Question

所以我试图为一些引导程序徽章创建一个幻灯片效果，我用它来显示使用AngularJS的一些分层数据关系。

我有一个滑块效果，用于显示新的子类别，以及隐藏已经打开的子类别。现在这一切都运作良好，除了它似乎做＆＃34;显示幻灯片＆＃34;首先，然后是＆＃34;隐藏幻灯片＆＃34;第二，这与你想要的相反。

即。当您点击其他类别的徽章时，应首先滑动已显示的其他子类别，然后打开要显示的新子类别。

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" class="badge-slider">
      <span class="badge badge-c">{{category.category_name}}</span>
    </li>
  </ul>
</div>

相关的CSS看起来像这样：

.badge-slider {
    max-height: 100px;
    -webkit-transition: max-height linear 0.2s;
    -moz-transition: max-height linear 0.2s;
    -o-transition: max-height linear 0.2s;
    transition: max-height linear 0.2s;
    overflow:hidden;
}

.badge-slider.ng-hide {
    max-height: 0px;
}

我已经嘲笑了一个简化的plnkr示例来演示这里发生的事情：http://plnkr.co/edit/S255yk0N2wAXrfq7Mqd6

编辑1：感谢sbedulin的帮助，我能够很好地工作。我还更新了代码，以便子类根据它们在树下的距离动态缩进。你可以在这里找到我新模拟的版本：http://plnkr.co/edit/5I1pU0TZo6AjHJTbBuG9

Answer 1

我只通过修改你的CSS就能达到预期的效果：

/* Styles go here */
.badge-slider {
  max-height: 100px;
  -webkit-transition: max-height linear 1.2s;
  -moz-transition: max-height linear 1.2s;
  -o-transition: max-height linear 1.2s;
  transition: max-height linear 1.2s;
  transition-delay: 0.0s;
  overflow:hidden;
}

.badge-slider.ng-hide {
  -webkit-transition: max-height linear 0.0s;
  -moz-transition: max-height linear 0.0s;
  -o-transition: max-height linear 0.0s;
  transition: max-height linear 0.0s;
  max-height: 0px;
}

我在.badge-slider中将过渡长度设置为1.2秒，这样您就可以清楚地看到它的工作正常。关键是将transition-delay: 0.0s;添加到.badge-slider并将过渡长度0.0s添加到.badge-slider.ng-hide。希望这有帮助！

Answer 2

主要问题是<ul ng-repeat="category in categories">生成多个<ul>元素，ngRepeat应放在<li> s。

经过一些重构后，HTML将如下所示：

<ul>
    <li ng-repeat="category in categories"
        ng-init="isChild = category.category_type == 'child'"
        ng-show="category.category_show"
        class="badge-slider">

      <span ng-click="isChild || updateResults(category)"
            ng-bind="category.category_name"
            class="badge {{ isChild ? 'badge-c' : 'badge-p' }}">
      </span>

    </li>
</ul>

CSS

.badge-slider {
  -webkit-transition: all 0.2s linear 0.2s;
  -moz-transition:    all 0.2s linear 0.2s;
  -o-transition:      all 0.2s linear 0.2s;
  transition:         all 0.2s linear 0.2s;

  line-height: 30px;
  overflow:hidden;

  max-height: 30px;
}

.badge-slider.ng-hide {
  transition-delay: 0.0s;

  max-height: 0px;
}

工作插件是here

AngularJS ng-show指令在隐藏元素

2 个答案: