純粋なCSSカルーセル - スライドを変更したときのスライドアニメーションの問題

Question

純粋なCSSベースのCarousalを作成しました。私はjavascriptを使って、スライドを自動的に変更するだけです。それ以外はCSSです。私は、CSSの「トランジション」プロパティを使って各スライドを変更する際にスライドアニメーション効果を得ようとしていますが、スライドコンテナ全体にスライドしていません。 HTML：

<div class="carousel"> 
    <div class="carousel-inner" id="carousel-inner"> 
     <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"> 

     <div class="carousel-item"> 
      <h1>This is my first slide</h1> 
     </div> 
     <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""> 

     <div class="carousel-item"> 
      <h1>This is my second slide</h1> 
     </div> 
     <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""> 

     <div class="carousel-item"> 
      <h1>This is my third slide</h1> 
     </div> 
     <label for="carousel-3" class="carousel-control prev control-1">‹</label> 
     <label for="carousel-2" class="carousel-control next control-1">›</label> 
     <label for="carousel-1" class="carousel-control prev control-2">‹</label> 
     <label for="carousel-3" class="carousel-control next control-2">›</label> 
     <label for="carousel-2" class="carousel-control prev control-3">‹</label> 
     <label for="carousel-1" class="carousel-control next control-3">›</label> 
     <ol class="carousel-indicators"> 
      <li> 
       <label for="carousel-1" class="carousel-bullet">&#9679;</label> 
      </li> 
      <li> 
       <label for="carousel-2" class="carousel-bullet">&#9679;</label> 
      </li> 
      <li> 
       <label for="carousel-3" class="carousel-bullet">&#9679;</label> 
      </li> 
     </ol> 
    </div> 
</div> 

Javascriptを：

var n = 0; 
window.ev = false; 
document.getElementById("carousel-inner").onmouseenter = function() { 
    window.ev = true; 
}; 
document.getElementById("carousel-inner").onmouseleave = function() { 
    window.ev = false; 
    setTimeout(autoSlide, 400); 
}; 

function autoSlide() { 
    if (window.ev == false) { 
     n++; 
     if (n === 4) 
      n = 1; 
     document.getElementById("carousel-" + n).checked = true; 
     setTimeout(autoSlide, 4000); 
    } 
} 
autoSlide(); 

CSS：

.carousel { 
    position: relative; 
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.64); 
    width: 100%; 
} 

.carousel-inner { 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
} 

.carousel-open:checked + .carousel-item { 
    position: static; 
    opacity: 100; 
} 

.carousel-item { 
    position: absolute; 
    opacity: 0; 
    -webkit-transition: opacity 0.6s ease-out; 
    transition: opacity 0.6s ease-out; 
    display: block; 
    min-height: 330px; 
    width: calc(100% - 100px); 
    margin: 0 auto; 
} 

.carousel-control { 
    border-radius: 50%; 
    color: #aaa; 
    cursor: pointer; 
    display: none; 
    font-size: 80px; 
    line-height: 35px; 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translate(0, -50%); 
    cursor: pointer; 
    -ms-transform: translate(0, -50%); 
    transform: translate(0, -50%); 
    text-align: center; 
    width: 40px; 
    z-index: 10; 
} 

.carousel-control.prev { 
    left: 2%; 
} 

.carousel-control.next { 
    right: 2%; 
} 

.carousel-control:hover { 
    color: #000; 
} 

#carousel-1:checked ~ .control-1, 
#carousel-2:checked ~ .control-2, 
#carousel-3:checked ~ .control-3 { 
    display: block; 
} 

.carousel-indicators { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    text-align: center; 
    z-index: 10; 
} 

.carousel-indicators li { 
    display: inline-block; 
} 

.carousel-bullet { 
    color: #757575; 
    cursor: pointer; 
    display: block; 
    font-size: 24px; 
    font-weight: 300; 
} 

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet, 
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet, 
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet { 
    color: #009eb1; 
} 
.carousel-item { 
    background: lightblue; 
    padding: 20px; 
    text-align: center; 
} 

は、ここでのjsフィドル作業例です：https://jsfiddle.net/jt68zz9L/4/

はあなたの誰もがCSSのソリューションを持っている場合は、私たちを知ってみましょうスライドアニメーション用。あなたの助けに感謝。

Answer 1

良いアイデアBTW、GPUの活用のためにCSSで重く/連続したアニメーションを作成するには常に良い。 CSSで

小さな問題が:-)

あなただけ冗長であるコントロール、上のtransformプロパティを使用しています。あなたがする必要

：

1）は、全ての項目についてだけではなく不透明度をトランジションを追加します。 2）0の翻訳チェックされた項目、および未チェックの項目に100％変換x軸を与える（あなたはその負の方向を切り替えるように作ることができる）

は、ここで私はあなたからフォークjsfiddleです：JsFiddle

そしてここでは、更新されたコードであるプラススニペット：JavaScriptを使用して

var n = 0; 
 
window.ev = false; 
 
document.getElementById("carousel-inner").onmouseenter = function() { 
 
    window.ev = true; 
 
}; 
 
document.getElementById("carousel-inner").onmouseleave = function() { 
 
    window.ev = false; 
 
    setTimeout(autoSlide, 400); 
 
}; 
 

 
function autoSlide() { 
 
    if (window.ev == false) { 
 
     n++; 
 
     if (n === 4) 
 
      n = 1; 
 
     document.getElementById("carousel-" + n).checked = true; 
 
     setTimeout(autoSlide, 4000); 
 
    } 
 
} 
 
autoSlide();

.carousel { 
 
    position: relative; 
 
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.64); 
 
    width: 100%; 
 
} 
 

 
.carousel-inner { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
.carousel-open:checked + .carousel-item { 
 
    position: static; 
 
    opacity: 100; 
 
} 
 

 
.carousel-item { 
 
    position: absolute; 
 
    opacity: 0; 
 
    -webkit-transition: all 1s ease-out; 
 
    transition: all 1s ease-out; 
 
    display: block; 
 
    min-height: 330px; 
 
    width: calc(100% - 100px); 
 
    margin: 0 auto; 
 
     -webkit-transform: translate(100%, 0px); 
 
    cursor: pointer; 
 
    -ms-transform: translate(100%, 0px); 
 
    transform: translate(100%, 0px); 
 
} 
 

 
.carousel-open:checked + .carousel-item { 
 
    -webkit-transform: translate(0px, 0px); 
 
    cursor: pointer; 
 
    -ms-transform: translate(0px, 0px); 
 
    transform: translate(0px, 0px); 
 
} 
 

 
.carousel-control { 
 
    border-radius: 50%; 
 
    color: #aaa; 
 
    cursor: pointer; 
 
    display: none; 
 
    font-size: 80px; 
 
    line-height: 35px; 
 
    position: absolute; 
 
    top: 50%; 
 
    /* -webkit-transform: translate(0, -50%); 
 
    cursor: pointer; 
 
    -ms-transform: translate(0, -50%); 
 
    transform: translate(0, -50%);*/ 
 
    text-align: center; 
 
    width: 40px; 
 
    z-index: 10; 
 
} 
 

 
.carousel-control.prev { 
 
    left: 2%; 
 
} 
 

 
.carousel-control.next { 
 
    right: 2%; 
 
} 
 

 
.carousel-control:hover { 
 
    color: #000; 
 
} 
 

 
#carousel-1:checked ~ .control-1, 
 
#carousel-2:checked ~ .control-2, 
 
#carousel-3:checked ~ .control-3 { 
 
    display: block; 
 
} 
 

 
.carousel-indicators { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    z-index: 10; 
 
} 
 

 
.carousel-indicators li { 
 
    display: inline-block; 
 
} 
 

 
.carousel-bullet { 
 
    color: #757575; 
 
    cursor: pointer; 
 
    display: block; 
 
    font-size: 24px; 
 
    font-weight: 300; 
 
} 
 

 
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet, 
 
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet, 
 
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet { 
 
    color: #009eb1; 
 
} 
 
.carousel-item { 
 
    background: lightblue; 
 
    padding: 20px; 
 
    text-align: center; 
 
}

<div class="carousel"> 
 
    <div class="carousel-inner" id="carousel-inner"> 
 
     <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"> 
 

 
     <div class="carousel-item"> 
 
      <h1>This is my first slide</h1> 
 
     </div> 
 
     <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""> 
 

 
     <div class="carousel-item"> 
 
      <h1>This is my second slide</h1> 
 
     </div> 
 
     <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""> 
 

 
     <div class="carousel-item"> 
 
      <h1>This is my third slide</h1> 
 
     </div> 
 
     <label for="carousel-3" class="carousel-control prev control-1">‹</label> 
 
     <label for="carousel-2" class="carousel-control next control-1">›</label> 
 
     <label for="carousel-1" class="carousel-control prev control-2">‹</label> 
 
     <label for="carousel-3" class="carousel-control next control-2">›</label> 
 
     <label for="carousel-2" class="carousel-control prev control-3">‹</label> 
 
     <label for="carousel-1" class="carousel-control next control-3">›</label> 
 
     <ol class="carousel-indicators"> 
 
      <li> 
 
       <label for="carousel-1" class="carousel-bullet">&#9679;</label> 
 
      </li> 
 
      <li> 
 
       <label for="carousel-2" class="carousel-bullet">&#9679;</label> 
 
      </li> 
 
      <li> 
 
       <label for="carousel-3" class="carousel-bullet">&#9679;</label> 
 
      </li> 
 
     </ol> 
 
    </div> 
 
</div>