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

Question

我得到了一个阶段列表，在每次单击next按钮时，活动元素的边框应该是红色的。

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

任务是

1. 红色边框应该从活动列表的0px开始，并增长到100%。是否可以使用css转换以这种方式动画边框。
2. 应该在活动的li边框的中间底部有一个向下的箭头。
3. 我希望列表项目的宽度分布均匀。 li{边框-底部:5 5px实心；列表样式:无；文本对齐:中间；宽度:90 5px；/*切换该行*/}

如果您注释这个宽度属性并查看边框，您可以获得更好的信息。

​

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

})

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

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

​

Answer 1

我认为您不能使用css动画DOM元素的边框。但你可以看看这个小玩意。我用前后的伪元素来制作动画.我希望这能帮助你，并可能给你实现目标的第一步。对于第2点，我将为li元素添加一个span，并将其绝对定位。https://jsfiddle.net/Marouen/ebq90f5u/

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