css – 单击时将圆形背景从一个元素切换或移动到另一个元素

每当我点击任何列表图标时,我想要将颜色从一个列表动画到另一个列表

.days-cal li {
  color: #d5d1e6;
  height: 36px;
  width: 36px;
  display: inline-block;
  border-radius: 19px;
  margin: 0 5px;
  padding-top: 06px;
  -webkit-transition: 0.5s linear;
  -moz-transition: 0.5s linear;
  -o-transition: 0.5s linear;
  transition: 0.5s linear;
}
.days-cal li.active {
  background: #4B916C;
  text-align: center;
  margin: 0px 0;
  padding-top: 6px;
}

<div class="expand-view inven-l">
  <div class="item">
    <ul class="days-cal">
      <li ng-class="{'active':weekOf==1}" ng-click="weekSelect(1)">Sun</li>
      <li ng-class="{'active':weekOf==2}" ng-click="weekSelect(2)">Mon</li>
      <li ng-class="{'active':weekOf==3}" ng-click="weekSelect(3)">Tue</li>
      <li ng-class="{'active':weekOf==4}" ng-click="weekSelect(4)">Wed</li>
      <li ng-class="{'active':weekOf==5}" ng-click="weekSelect(5)">Thu</li>
      <li ng-class="{'active':weekOf==6}" ng-click="weekSelect(6)">Fri</li>
      <li ng-class="{'active':weekOf==7}" ng-click="weekSelect(7)">Sat</li>

    </ul>
  </div>
</div>

解决方法

使用虚拟元素和变换：

实现此目的的一种方法是在ul.days-cal中使用虚拟元素,该元素创建圆,然后根据单击的元素的索引将其转换(使用CSS变换).

$('li').on('click',function() {
  var translateX = ($(this).index()) * 46; /* width + 2 * margin */
  $('ul.days-cal .circle').css('transform','translateX(' + translateX + 'px)');
});

.days-cal li {
  color: #d5d1e6;
  height: 36px;
  width: 36px;
  float: left;
  line-height: 36px;
  margin: 0 5px;
  padding-top: 6px;
  transition: 0.5s linear;
  text-align: center;
}
.days-cal {
  position: relative;
  padding: 0;
  list-style: none;
}
.days-cal li.circle {
  position: absolute;
  content: '';
  height: 36px;
  width: 36px;
  top: 6px;
  left: 0px;
  padding: 0px;
  margin: 0px 5px;
  background: #4B916C;
  border-radius: 50%;
  z-index: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expand-view inven-l">
  <div class="item">
    <ul class="days-cal">
      <li>Sun</li>
      <li>Mon</li>
      <li>Tue</li>
      <li>Wed</li>
      <li>Thu</li>
      <li>Fri</li>
      <li>Sat</li>
      <li class='circle'></li>
    </ul>
  </div>
</div>

使用径向渐变:(无需额外元素)

在不使用任何额外虚拟元素的情况下实现此目的的另一种方法是使用径向渐变作为ul.days-cal的背景图像,然后根据单击的元素的索引调整渐变的背景位置.

使用径向梯度的缺点是它在IE9-中不起作用.

$('li').on('click',function() {
  var translateX = ($(this).index()) * 46; /* width + 2 * margin */
  $('ul.days-cal').css('background-position',translateX + 'px 0px');
});

.days-cal li {
  color: #d5d1e6;
  height: 36px;
  width: 36px;
  float: left;
  line-height: 36px;
  margin: 0 5px;
  padding-top: 6px;
  transition: 0.5s linear;
  text-align: center;
}
.days-cal {
  position: relative;
  padding: 0;
  height: 42px;
  list-style: none;
  background-image: radial-gradient(36px 36px at 24px 24px,#4B916C 48.5%,transparent 51%);
  background-position: 0px 0px;
  transition: all 0.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expand-view inven-l">
  <div class="item">
    <ul class="days-cal">
      <li>Sun</li>
      <li>Mon</li>
      <li>Tue</li>
      <li>Wed</li>
      <li>Thu</li>
      <li>Fri</li>
      <li>Sat</li>
    </ul>
  </div>
</div>