Question

我想添加简单的幻灯片完成/向上动画。例如，如果您转到Fiddle，您可以看到左侧面板，您可以在其中添加外部资源，Ajax请求等。如果单击其中一些，您可以看到简单的动画滑动效果。我想要实现的有点类似。我有一个HTML按钮：

<button class="checkbox-button btn btn-primary" ng-click="updateActiveTypeBox(true)">{{typeBoxMessage}}</button>

这是我的复选框div：

<div ng-show="activeTypeBox">
    <div class="checkbox">
        <label>
            <input type="checkbox" ng-model="selectAll.selected" ng-click="checkAll()" />Check All
        </label>
        <label ng-repeat="carType in carTypeObj">
            <input type="checkbox" ng-model="carType.selected" /> {{carType.type}}
        </label>
    </div>
</div>

当您点击该按钮时，activeTypeBox设置为true，因此ng-show="activeTypeBox"通过。再次点击此按钮时，activeTypeBox设置为false，因此ng-show="activeTypeBox"失败。我需要添加的唯一内容是向下/向上滑动动画。我更喜欢使用Angular-Animate，因为它是使用角度代码的库。我试图找到解决方案，但我找不到符合我要求的解决方案。

Answer 1

编辑：

看起来可以用CSS完成：

.animate-show {
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.animate-show.ng-hide {
  line-height:0;
  opacity:0;
  padding:0 10px;
}

所以只需为div添加class="animate-show"

https://docs.angularjs.org/api/ng/directive/ngShow#usage_animations

一个工作示例：

http://plnkr.co/edit/xmkBjvPY5OjFLnxcuVKz?p=preview&s=jBzeCEpWphlOpSRv

使用ngAnimate向下/向上滑动？

1 个答案: