CSSトランジション・イン・アウトが機能しない

Question

CSSでトランジション・イージー・インを追加しました。コンテナ3内のユーザーがメニューをクリックすると、コンテナ2内の記事が表示され、表示されるとスムーズに上下に移動します。今のところ、他のタグはトランジション以外は完全にうまく動作します。どの部分を修正する必要がありますか？

html { 
 
    overflow: scroll; 
 
    overflow-x: hidden; 
 
} 
 
::-webkit-scrollbar { 
 
    width: 0px; /* remove scrollbar space */ 
 
    background: transparent; /* optional: just make scrollbar invisible */ 
 
} 
 
/* optional: show position indicator in red */ 
 
::-webkit-scrollbar-thumb { 
 
    background: #FF0000; 
 
} 
 
#container1{ 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 1px solid green; 
 
    overflow: hidden; 
 
} 
 

 
#container2{ 
 
    width: 70%; 
 
    height: 99%; 
 
    border: 1px solid blue; 
 
    overflow: auto; 
 
    float:right; 
 
    padding-right: 15px; 
 
} 
 
    
 
#container3{ 
 
    width: 25%; 
 
    height: 99%; 
 
    border: 1px solid black; 
 
    overflow: auto; 
 
    float: left; 
 
    padding-right: 15px; 
 
} 
 

 
html, body{ 
 
    height: 99%; 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
} 
 

 
/*responsive image*/ 
 
img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.panel{ 
 
    width:100%; 
 
    height:100%; 
 
    z-index:0; 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    -webkit-transition: -webkit-transform 0.9s ease-in-out; 
 
    transition: transform 0.9s ease-in-out; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

 
a[ id= "one" ]:target ~ #main article.panel { 
 
    -webkit-transform: translateY(0px); 
 
    transform: translateY(0px); 
 
} 
 

 
a[ id= "two" ]:target ~ #main article.panel { 
 
    -webkit-transform: translateY(-500px); 
 
    transform: translateY(-500px); 
 
} 
 

 
a[ id= "commerce" ]:target ~ #main article.panel { 
 
    -webkit-transform: translateY(-1000px); 
 
    transform: translateY(-1000px); 
 
}

<div id="container1"> 
 
    <div id="row"> 
 
     <div id="container3"> 
 

 
      <nav> 
 
       <ul> 
 
        <li><a href="#commerce">Commerce</a></li> 
 
        <li><a href="#one"> 1 </a> </li> 
 
        <li><a href="#two"> 2 </a> </li> 
 
        <li><a href="#two"> 2 </a> </li> 
 
        <li><a href="#two"> 2 </a> </li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 
    </div> 
 
     
 
    <div id="container2"> 
 

 
     <article class="panel" id="one"> 
 
      <h1> A bit of text here</h1> 
 
     </article> 
 

 
     <article class="panel" id="two"> 
 
      <h1> More here :-)</h1> 
 
     </article> 
 

 
     <article class="panel" id="commerce"><img src = "http://plusquotes.com/images/quotes-img/roundflower.jpg" alt="breakfast"></article> 
 
    
 
    </div> 
 
</div>

Answer 1

あなたないはCSSでスクロールアニメーションを作成することができます。

例では、アニメーションはちょうどHTMLアンカーで行われます。

でも、JavaScript/JQueryを使用できます。

例は

function scrollToAnchor(id){ 
 
    var element = $("#"+id); 
 
    $('html,body').animate({scrollTop: element.offset().top},'slow'); 
 
}

.content{ 
 
    width:100%; 
 
    height:800px; 
 
    background-color:#ddd; 
 
    border:solid 1px #555; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a onclick="scrollToAnchor('1')">nav 1</a> 
 
<a onclick="scrollToAnchor('2')">nav 2</a> 
 
<a onclick="scrollToAnchor('3')">nav 3</a> 
 
<div class="content" id="1">1</div> 
 
<div class="content" id="2">2</div> 
 
<div class="content" id="3">3</div>

Answer 2

私はまだコメントすることはできないんだけど、私はアレクシス彼の答えを改善したいと考えました。

jQuery(document).on('click', 'a[href^="#"]', function(e) { 
    var _this = jQuery(this), _target = jQuery(_this.attr('href')); 

    if (_target.length) { 
     e.preventDefault(); 

     var offset = _target.offset().top - (parseInt(_this.data('offset')) || 100), v_offset = jQuery(document).height() - jQuery(window).height() - 100, speed = Math.abs(jQuery(window).scrollTop() - offset); 

     jQuery('html, body').animate({ 
      scrollTop : offset <= v_offset ? offset : v_offset 
     }, (Math.log(Math.pow(speed/1000, .5)) + 1) * 1000); 
    } 
}); 

これをクリックイベントで使用すると、＃を使用するすべてのアンカータグでアニメーション機能が使用されます。それをこのようにすることであなたはすべての単一のリンク上でのonclickを使用する必要はありません:)

<a href="#example" offset="300">Testing</a> 

さまざまは、各内部リンクのためを相殺することができます。上記のコードで使用されている標準オフセットは100ピクセルです。