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

时间：2016-05-02 07:48:27

标签： css css3 css-shapes

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

select weekdays

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：5)

使用虚拟元素和转换：

实现这一目标的一种方法是在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>

答案 1 :(得分：3)

这是一个片段，展示了CSS如何做到这一点。我在这里使用tabindex，但我也可以使用表单元素来模仿你点击你的项目时缺少的函数对ng-class的作用（无法猜测但是等你更新问题所以我可以更新回答:)）。

要记住的CSS部分是nth-child(x)和选择器~，因此您可以更新由最后一项产生的伪的协调。

/// WELL your function is missing, so i do not link snippet to any library  ///
// IN the  CSS part, replace occurance of :focus by .active  //
.item {
  font-size:16px;
  background:rgba(255,255,255,0.1);
  overflow:hidden;
  position:relative;
  margin:1em;
}
.days-cal li {
  color: #d5d1e6;
  text-align:center;
  line-height:36px;
  height: 36px;
  width: 36px;
  display: inline-block;
  border-radius: 19px;
  margin: 0 5px;
}
/* replace occurance of :focus by .active  */
.days-cal li:nth-child(7):focus:before {
  left:345px;  
}
.days-cal li:nth-child(6):focus ~ li:last-of-type:before {
  left:295px;  
}
.days-cal li:nth-child(5):focus ~ li:last-of-type:before {
  left:245px;  
}
.days-cal li:nth-child(4):focus ~ li:last-of-type:before {
  left:195px;  
}

.days-cal li:nth-child(3):focus ~ li:last-of-type:before {
  left:145px;  
}
.days-cal li:nth-child(2):focus ~ li:last-of-type:before {
  left:95px;  
}
.days-cal li:nth-child(1):focus ~ li:last-of-type:before {
  left:45px;  
}
li:last-of-type:before {
  content:'';
  height:36px;
  width:36px;
  display:inline-block;
  background: #4B916C;
  position:absolute;
  left:-50px;
  transition:left 0.5s;
  z-index:-1;
  border-radius:50%;
}
li:focus {
  animation:dripple 0.5s 
}
@keyframes dripple {
  0 , 50%{
    box-shadow:0 0 0 rgba(0,0,0,0.5) , inset 0 0 0 0 rgba(255,255,255,0.3) , inset 0 0 0 0 rgba(0,0,0,0.5), inset 0 0 0 0  rgba(255,255,255,0.3), inset 0 0 0 0 rgba(0,0,0,0.5);
  }
  20% {
    box-shadow:0 0 3px rgba(0,0,0,0.5), inset 0 0 3px 0 rgba(255,255,255,0.3), inset 0 0 3px 3px rgba(0,0,0,0.5), inset 0 0 2px 9px rgba(255,255,255,0.3), inset 0 0 2px 11px rgba(0,0,0,0.5);
  }
}

body {
  background:#352B58;
}
<div class="expand-view inven-l">
  <div class="item">
    <!-- DISCLAIMER/ tabindex is used to show that CSS can achieve this, but we need to relay on your js function to fully adapt to your code -->
    <ul class="days-cal" ng-controller="MainController as vc">
      <li  tabindex="0" ng-class="{'active':weekOf==1}" ng-click="weekSelect(1)">Sun</li>
      <li  tabindex="0" ng-class="{'active':weekOf==2}" ng-click="weekSelect(2)">Mon</li>
      <li  tabindex="0" ng-class="{'active':weekOf==3}" ng-click="weekSelect(3)">Tue</li>
      <li  tabindex="0" ng-class="{'active':weekOf==4}" ng-click="weekSelect(4)">Wed</li>
      <li  tabindex="0" ng-class="{'active':weekOf==5}" ng-click="weekSelect(5)">Thu</li>
      <li  tabindex="0" ng-class="{'active':weekOf==6}" ng-click="weekSelect(6)">Fri</li>
      <li  tabindex="0" ng-class="{'active':weekOf==7}" ng-click="weekSelect(7)">Sat</li>

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

codepen to play with or fork

相关问题
最新问题