内容滑块以手风琴停止和开始

时间：2017-07-04 19:50:06

标签： javascript html css

我在下面的代码中找到了我创建的手风琴中的Pure CSS内容滑块。手风琴打开和关闭时是否可以启动和停止内容滑块？目前，即使手风琴关闭，内容滑块也会继续运行。 Pure CSS可以实现这一点吗？如果没有，这将是可能使用Vanilla JavaScript（没有JQuery）。任何事都有帮助，欢呼。

.wrapper {
  max-width: 960px;
  margin: 0 auto;
}


/* Acordeon styles */

.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  overflow: hidden;
}

.bold {
  font-weight:bold;
  color: #005bab;
  }

.top {
  margin-top:-20px;
  text-align: center;
  font-size:13px;
}

.input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.label {
  position: relative;
  text-align: center;
  display: block;
  padding: 0 0 0 1em;
  color: #005bab;
  background: #e2ecf6;
  font-size: 14px;
  font-family: Verdana;
  font-weight: bold;
  line-height: 6;
  cursor: pointer;
}

.label:hover {
  background-color: #d2e2ef;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
  padding: 0px;
  -webkit-transition: max-height .5s;
  -o-transition: max-height .5s;
  transition: max-height .5s;
  padding-left: 35px;
  background: #dce7f2;
}

.tab-content .container {
  padding: 1em;
  margin: 0;
  opacity: 0;
  transform: scale(0.75);
  -webkit-transition: transform 0.75s, opacity .75s;
  -o-transition: transform 0.75s, opacity .75s;
  transition: transform 0.75s, opacity .75s;
  background: #f4f8fc;
}


/* :checked */

.input:checked~.tab-content {
  max-height: 35em;
}

.input:checked~.tab-content .container {
  transform: scale(1);
  opacity: 1;
}

/* Icon */

.label::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}

.input[type=checkbox]+.label::after {
  content: "+";
}

.input[type=radio]+.label::after {
  content: "";
}

.input[type=checkbox]:checked+.label::after {
  transform: rotate(315deg);
}

.input[type=radio]:checked+.label::after {
  transform: rotateX(180deg);
}

.bottombar {
  content: "";
  display: block;
  height: 1em;
  width: 100%;
  background-color: #00688B;
}


/* all position:absolute removed */
#scroller {
overflow:hidden;
}

#scroller .innerScrollArea {

}

#scroller ul {
  padding: 0;
  position: relative;
  display:flex;/* UPDATE */
}

#scroller li {
  padding: 0;
  list-style-type: none;
}
.circle {
  width: 130px;
  height: 130px;
  position: relative;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  background-color:transparent;
  border-style:solid;
  border-width:5px;
  border-color:#006850;
}

.circle-text {
  color: #1f497d;
  font-family:Verdana;
  font-size: 12px;
  text-align: center;
  width: 200px;
  top: 45px;
  margin-left:-35px;
  bottom: 0;
  position: absolute;
  z-index: 99;
}

.circleinv{
  width: 130px;
  height: 130px;
  position: relative;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  background-color:transparent;
  border-style:solid;
  border-width:5px;
  border-color:transparent;
}

.arrow {
  width:145px;
  height:45px;
}

.arrowinv {
  visibility:hidden;
  width:145px;
  height:50px;
}

.flipimage {
  width:145px;
  height:45px;
  -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

/* UPDATE  for animation */
.ul {
  animation: slidli 90s infinite linear;
}
.ul:hover {
  animation-play-state:paused;
}
@keyframes slidli {
  100% {
    transform:translatex(-733.5%);/* this is to be update to the content with to see every element slide once untill copies/clone comes back at same spot */ 
  }
}
<div class="top"> 
   <p> 
      <span style="font-family: verdana;"><strong>Click the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>&quot; to expand and the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>&quot; to collapse</strong></span></p> 
</div> 
<div class="wrapper">
  
  
  
  <div class="tab">
    <input name="tabs" class="input" id="tab-one" type="checkbox"/>
         <label class="label" for="tab-one">Content Slider</label>
         <div class="tab-content">
            <div class="container">
              
                      <div class="everything">
  <div id="scroller" style="width: 400px; height: 255px; margin: 0 auto;">
    <div class="innerScrollArea">
      <ul class="ul">
        <li>
          <br style="line-height:49px;"/>
          <div class="circle">
            <div class="circle-text">
              HR Connect<br/>Service<br/>Representative
            </div>
          </div>
          <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
        </li>
        <li>
          <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
          <div class="circle">
            <div class="circle-text">
              Employee<br/>Relations<br/>Specialist
            </div>
          </div>
        </li>
        <li>
          <br style="line-height:49px;"/>
          <div class="circle">
            <div class="circle-text">
              Employee<br/>Relations<br/>Manager
            </div>
          </div>
          <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
        </li>
        <li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
          <div class="circle">
            <div class="circle-text">
              Director, Employee<br/>Relations &<br/>Well-Being
            </div>
          </div>
        </li>
                <li>
          <div class="circleinv">
          </div>
        </li>
        <li>
          <div class="circleinv">
          </div>
        </li>
        
        <!--Dupes-->
        
                <li>
          <br style="line-height:49px;"/>
          <div class="circle">
            <div class="circle-text">
              HR Connect<br/>Service<br/>Representative
            </div>
          </div>
          <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
        </li>
        <li>
          <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
          <div class="circle">
            <div class="circle-text">
              Employee<br/>Relations<br/>Specialist
            </div>
          </div>
        </li>
        <li>
          <br style="line-height:49px;"/>
          <div class="circle">
            <div class="circle-text">
              Employee<br/>Relations<br/>Manager
            </div>
          </div>
          <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
        </li>
        <li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
          <div class="circle">
            <div class="circle-text">
              Director, Employee<br/>Relations &<br/>Well-Being
            </div>
          </div>
        </li>
                <li>
          <div class="circleinv">
          </div>
        </li>
        <li>
          <div class="circleinv">
          </div>
        </li>
        
        <!--Dupe 2-->
        
                <li>
          <br style="line-height:49px;"/>
          <div class="circle">
            <div class="circle-text">
              HR Connect<br/>Service<br/>Representative
            </div>
          </div>
          <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
        </li>
        <li>
          <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
          <div class="circle">
            <div class="circle-text">
              Employee<br/>Relations<br/>Specialist
            </div>
          </div>
        </li>
        <li>
          <br style="line-height:49px;"/>
          <div class="circle">
            <div class="circle-text">
              Employee<br/>Relations<br/>Manager
            </div>
          </div>
          <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
        </li>
        <li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
          <div class="circle">
            <div class="circle-text">
              Director, Employee<br/>Relations &<br/>Well-Being
            </div>
          </div>
        </li>
                <li>
          <div class="circleinv">
          </div>
        </li>
        <li>
          <div class="circleinv">
          </div>
        </li>
        
        <!--Dupe 3-->
        
                <li>
          <br style="line-height:49px;"/>
          <div class="circle">
            <div class="circle-text">
              HR Connect<br/>Service<br/>Representative
            </div>
          </div>
          <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
        </li>
        <li>
          <img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
          <div class="circle">
            <div class="circle-text">
              Employee<br/>Relations<br/>Specialist
            </div>
          </div>
        </li>
        <li>
          <br style="line-height:49px;"/>
          <div class="circle">
            <div class="circle-text">
              Employee<br/>Relations<br/>Manager
            </div>
          </div>
          <img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
        </li>
        <li>
<img class="arrowinv" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499184462/testarrow_yhblyv.png">
          <div class="circle">
            <div class="circle-text">
              Director, Employee<br/>Relations &<br/>Well-Being
            </div>
          </div>
        </li>
                <li>
          <div class="circleinv">
          </div>
        </li>
        <li>
          <div class="circleinv">
          </div>
        </li>
        
      </ul>
    </div>
  </div>
</div>
              
            </div>
         </div>
  </div>
  
  <div class="bottombar"></div>
  
</div>

1 个答案:

答案 0 :(得分：1)

我通常建议你用JS做这种事情，但如果你想避免它，这是一个有效的（虽然详细）解决方案：

替换

.ul:hover {
  animation-play-state:paused;
}

与

.input:checked~.tab-content .container .ul:hover {
  animation-play-state:paused;
}

.tab-content .container .ul{
  animation-play-state:paused;
}
.input:checked~.tab-content .container .ul {
  animation-play-state:running;
}

这是一支显示解决方案的笔。 https://codepen.io/anon/pen/zzaKow

相关问题
最新问题