我们的团队在ServiceNow中创建了一个小部件,当单击图标时,该小部件显示一行图标并在div中显示/隐藏其他详细信息。这就是我们的html和客户端控制器的外观:
<div class="icons">
<ul class="flex justify-content-center align-items-center">
<li ng-repeat="item in c.data.linksArray track by $index">
<a class="link" href="javascript:void(0)" ng-click="c.getInfo(item)">
<i title="{{item.titles}}" class='fa {{item.icon}} fa-3x circle-icon'></i>
</a>
</li>
</ul>
</div>
<div class="linkList text-center"
ng-repeat="thing in c.data.linksArray track by $index"
ng-if="thing.isVisible==true">
<ul>
<li class="m-b-sm" ng-repeat="link in thing.links">
<a href="{{link.link_url}}">{{link.link_title}}</a>
</li>
</ul>
</div>
function($scope) {
/* widget controller */
var c = this;
c.getInfo = function(item) {
var isDisplaying = false;
if(item.isVisible== true){
isDisplaying = true;
}
for(var i=0; i<c.data.linksArray.length; i++){
c.data.linksArray[i].isVisible = false;
}
if(isDisplaying == true){
item.isVisible = false;
}else{
item.isVisible=!item.isVisible;
}
}
console.log('icon-link-list');
console.log($scope);
}
这一切都很好,但是我们想通过向.linkList
类添加滑动效果来完善它。现在,单击图标时,.linkList
div突然出现。是否可以使用CSS向该div添加滑动过渡效果?
您可以通过纯CSS动画解决此问题。将这个CSS应用于我们将要隐藏/显示的项目。动画将在css属性“显示”更改时随时播放。我想这是linkList元素?
.linkList {
animation: slideFromLeft .2s;
animation-timing-function: ease;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes slideFromLeft{
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: none;
}
}
编辑:您可能必须将linkList上的ng-if
更改为ng-show
。