Question

我有一个堆叠的菜单下拉菜单，我希望每个菜单项逐渐变亮。我已经使用sass lighten（）规则手动完成了，但是我想知道是否有一种方法可以为每个新的列表项增量减少5％的dinamically。我想有些jquery应该结合起来实现这一点。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="list-item-1">1</li>
  <li class="list-item-2">2</li>
  <li class="list-item-3">3</li>
  <li class="list-item-4">4</li>
  <li class="list-item-5">5</li>
</ul>

Answer 1

您可以使用SASS的<mat-nav-list class="surveys"> <strong class="survey-list">Surveys <span> <mat-icon (click)="sort('date')" >arrow_downward </mat-icon> </span> </strong> <a mat-list-item *ngFor="let survey of surveyRecords|orderBy: {property: column, direction: direction}"> {{ survey.surveyName }} </a> </mat-nav-list>。

@for

如果你想要它可以动态地发生大量的物品，那么JS可能是不可避免的。

Answer 2

编辑：@MichałKostrzyński发布了相同的答案。将此留给CodePen。

您可以使用简单的sass for表达式来实现此目的。如果您启用了SCSS，请不要使用javascript。

@for $i from 1 through 5 {
    .list-item-#{$i} {
      background-color:lighten(#333, 5%*$i)
    }
}

见这里： https://codepen.io/Pauloscorps/pen/aVdrpY

Answer 3

使用each和rgba

＆＃13;

var opacity = 1;

$("ul > li").each(function(index, element){
  $(element).css("background-color", "rgba(51, 51, 51, "+opacity+")");
  opacity -= 0.05;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="list-item-1">1</li>
  <li class="list-item-2">2</li>
  <li class="list-item-3">3</li>
  <li class="list-item-4">4</li>
  <li class="list-item-5">5</li>
</ul>

＆＃13;

Answer 4

＆＃13;

for(var i = 1; i < 6;i++)
{
  var opacity = 1/6*i ;
	$('ul').append('<li class="list-item-'+i+'" style="background-color:rgba(0,0,0,'+opacity+')">'+i+'--'+opacity+'</li>');
  
}

＆＃13;

ul li {
  padding: 10px;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
</ul>

＆＃13;

这样的事可能

在动态上减轻每个列表项子项的背景

4 个答案: