Question

由于我实现节目更多/显示更少功能的方式，我不确定是否可以实现平滑效果，但我认为在这个论坛中值得问一下，并希望收到一些关于制作效果可能。

我有一个固定限制数为5的动态链接列表，点击该数字会增加，并根据该规则隐藏或显示ng-hide / ng-show部分。

我想要实现的是当节目更多或显示更少的链接被点击时平滑的速度，因此效果不那么快，更优雅。

链接标记：

<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>

显示更多/鞋少标记：

<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增加/减少限制：

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;
    }
};

Answer 1

您是否尝试过ngAnimate？

看一看，我认为这正是您所寻找的。

Answer 2

如果您不想使用像ngAnimate这样的附加库，可以自己添加css过渡：

SELECT DISTINCT p.sno,p.fir_sno,p.short_order,p.date_fixed,
CONCAT(f.complainant,' V/S ',f.accused) AS title,f.under_sections,f.case_FIR_no 
FROM pre_trials p, fir f 
WHERE f.sno = p.fir_sno 
GROUP BY p.fir_sno 
ORDER BY p.sno DESC

检查一下：https://css-tricks.com/almanac/properties/t/transition/

显示更多，使用ng-hide / ng-show和功能显示更少

2 个答案: