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

【问题标题】：Border to grow as progress bar in list item边框在列表项中作为进度条增长
【发布时间】：2016-08-04 18:05:45
【问题描述】：

我有一个阶段列表，每次单击下一步按钮时，活动元素的边框都应该是红色的。

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

任务是

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

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

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

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

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>

【问题讨论】：

标签： html css angularjs

【解决方案1】：

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

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

【讨论】：