Question

我得到了一个阶段列表，每按一下按钮，活动元素的边框应为红色。

该项目基于angularjs，下面是我的jsfiddle https://jsfiddle.net/alaksandarjesus/c51h4y5q/

任务是

红色边框应从活动列表的0px开始，并增长到100％。是否可以使用css过渡以这种方式为边框设置动画。
在活动的li边框的中间底部应该有一个向下箭头。

我希望列表项宽度均匀分布。

li{
border-bottom:5px solid;
list-style:none;
text-align:center;
width:90px;/*toggle this line*/
}

如果您对此宽度属性发表评论并查看边框，则可以获得更好的信息。

＆＃13;

var app = angular.module('testApp',[]);
app.controller('testController', function($scope){

$scope.items = ['stage-1','stage-2','stage-3','stage-4','stage-5','stage-6']
$scope.active = 0;

$scope.nxtClicked = function(){
	if($scope.active  < $scope.items.length-1){
  $scope.active++;
  }

}

$scope.bckClicked = function(){
if($scope.active > 0){
  $scope.active--;
  }
}

})

＆＃13;

ul{
  margin 0;
  padding: 0;
  display:flex;
  justify-content:space-between;
}

li{
  border-bottom:5px solid;
  list-style:none;
  text-align:center;
  width:90px;
}

li.completed{
  border-color:green;
  
}
li.incomplete{
  border-color:#ddd;
}

li.active{
  border-color:red;
}

＆＃13;

<ul>
  <li ng-repeat="item in items" ng-class="{'completed':$index<active, 'incomplete':$index>active,'active':$index==active}">{{item}}</li>
</ul>

<button ng-click="nxtClicked()">Next</button>
<button ng-click="bckClicked()">Back</button>

＆＃13;

Answer 1

我认为你无法使用css为DOM-Element的边框设置动画。但你可以看看这个小提琴。我使用了之前和之后的伪元素来制作动画。我希望这可以帮助您，并可能为您提供实现目标的第一步。对于第2点，我将向li元素添加一个跨度并将其绝对定位。 https://jsfiddle.net/Marouen/ebq90f5u/

[https://jsfiddle.net/Marouen/ebq90f5u/][1]

边框在列表项中增长为进度条

1 个答案: