Question

我是css过渡的新手，当我点击“查看更多”时，我想为我的按钮“option1”和“option2”添加滑动效果。这些按钮应该从后面看更多。

我目前正在使用ng-if来隐藏和显示我的两个按钮

<div class="bottom-right">
<button class="btn button1" ng-click="showAll()">view more</button>
<button ng-if="viewmore"  class="btn button1">option1</button>
<button ng-if="viewmore"  class="btn button1">option2</button>
</div>

我该怎么做？

这是我的plunker http://plnkr.co/edit/HA7RzM3FPXlEb5g7Jh4r?p=preview

Answer 1

我认为这是AngularJS文档中的一个非常好的例子。

<div ng-init="checked=true">
  <label>
    <input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
  </label>
  <div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
    Visible...
  </div>
</div>

.sample-show-hide {
 padding:10px;
 border:1px solid black;
 background:white;
}

.sample-show-hide {
 -webkit-transition:all linear 0.5s;
 transition:all linear 0.5s;
}

.sample-show-hide.ng-hide {
 opacity:0;
}

我希望它会对你有所帮助。

Answer 2

我建议使用ngAnimate来达到这个效果。

由于角度1.2。*大约2年前出现，这是一篇很棒的文章，解释了如何使用此版本完全满足您的需求：

http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-nginclude-ngview-and-ngif

如何为按钮滑动添加CSS Transition

2 个答案: