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

Question

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

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

Answer 1

使用虚拟元素和变换:

实现此目的的一种方法是使用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,然后background-position根据所单击元素的索引调整渐变.

使用径向梯度的缺点是它在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>