显示更多，显示更少使用ng-hide/ ng-show和函数

Because of the way I am implementing the show more/ show less feature, I am not sure if achieve the smooth effect is possible, but I thought it was worth ask in this forum and hope to receive some good ideas on making the effect possible.

由于我正在实现show more/ show less特性的方式，我不确定是否能够实现光滑的效果，但是我认为在这个论坛上值得一问，希望能得到一些关于使效果成为可能的好想法。

I have a list of dynamic links that have a fixed limit number of 5, on ng-click the number gets increased and based on that rule the ng-hide/ ng-show sections are hidden or displayed.

我有一个动态链接列表，它的限制值为5，在ng-click上，这个数字会增加，根据这个规则，ng-hide/ ng-show部分将被隐藏或显示。

What I would like to achieve is a smooth speed when the show more or show less links are clicked so the effect is not as fast and yes more elegant.

我想要达到的是一个平滑的速度，当显示更多或显示较少的链接被点击，所以效果不那么快，是的，更优雅。

links mark-up:

链接标记:

<ul class="precall-journal-links">

    <li ng-repeat="fact in pc.historyRecords | limitTo:pc.limit" style="list-style-type: none; margin: 5px 0;">

        <a style="color: #345bab;" ng-click="pc.load_history_record(fact.dump.PreCallID); ">{{fact.dump.PrimaryKeyName}}:{{fact.dump.PreCallID}}
            _Date:{{fact.dump.MeetingDate}}
            _Time:{{fact.dump.MeetingTime}}
            _Location:{{fact.dump.MeetingLocation}}
        </a>

    </li>

</ul>

show more/ shoe less mark-up:

展示更多/少鞋价:

<div class="arrows" style="position: relative; top: 2px; left: 40px;">

    <div ng-hide="pc.historyRecords.length <= pc.limit">
        <a style="position: relative; bottom: 5px; color: #3e4c67;" ng-click="pc.increaseItemCount()">See More <i class="fa fa-arrow-down"></i></a>
    </div>

    <div ng-hide="(pc.limit === 5)||(pc.historyRecords.length <= 5)">
        <a style="position: relative; bottom: 5px; color: #3e4c67;" ng-click="pc.decreaseItemCount()">See Less <i class="fa fa-arrow-up"></i></a>
    </div>

</div>

javascript to increase/ decrease limit:

javascript增加/减少限制:

vm.limit = 5;
vm.increaseItemCount = function (item) {
    vm.limit = vm.limit + 5;
};
vm.decreaseItemCount = function (item) {
    if (vm.limit > 0) {
        vm.limit = vm.limit - 5;
    }
};

2 个解决方案

#1

Have you tried ngAnimate?

你有试过ngAnimate吗?

Take a look, I think thats exactly what you are looking for.

看一看，我想这正是你要找的。

#2

If you don't want to use an additional library like ngAnimate, you can add the css transitions yourself:

如果您不想使用一个额外的库，如ngAnimate，您可以自行添加css转换:

transition: ease .300s;

check this out: https://css-tricks.com/almanac/properties/t/transition/

看看这个:https://css-tricks.com/almanac/properties/t/transition/

#1