2

リンクをクリックすると、コンテンツがページ上をスライドする (左から右に、1 秒以上でイージングする) 単一ページの Web サイトを作成しています。残念ながら、トランジションを機能させることがまったくできません。

:hover を使用して .content クラスを遷移させることはできますが、それ以外の場合は遷移/アニメーション効果を達成できないようです。理想的には、#home、#portfolio、#contact、#cv をスライドインする要素にしたいと思っていますが、何時間も運がありませんでした.

私のスライドがすべてスリーブに入っているという設定のせいなのだろうか？

これは、関連するセクションの私の CSS コードです。

#sleeve { 
        position: relative;
        top: 35%;
        width: 400%;
        z-index: 2;
        height: 60%;
    }

#home, #portfolio, #contact, #cv {
        background: aqua;
        width: 25%;
        margin: 0;
        position: relative;
        z-index: 2;
        float: left;
        height: 100%;

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out; 
    }

#home:target ~ #header #navigation #home,
#portfolio:target ~ #header #navigation #portfolio,
#contact:target ~ #header #navigation #contact ,
#cv:target ~ #header #navigation #cv { 
    background: white;
margin-left: 0%;
}


.content {
width: 70%;
min-height: 40%;
margin-left: 15%;
margin-right: 15%;
margin-top: 2%;
background-color: white;
z-index: 5;
position: relative;
}

これは私のHTMLです：

<body>
<div id="header"> 
<div id="navigation">
    <a id="link-home" href="#home">   home  </a>
    <a id="link-portfolio" href="#portfolio">   portfolio   </a>
    <a id="link-contact" href="#contact">   contact   </a>
    <a id="link-cv" href="#cv">   cv  </a>
</div>
<h1> ---- :</h1> <h2>portfolio and work</h2> 
</div>

<div id="sleeve">

<div id="home"> 
    <div class="content"><p> home</p> </div>
</div>

<div id="portfolio" class="panel"> <p> portfolio </p> </div>
<div id="contact" class="panel"> <p> contact </p> </div>
<div id="cv" class="panel"> <p> cv </p> </div>
</div>

<div id="footer"> copyright ----- 2013 </div>
</body>

誰の助けにも永遠に感謝します！

4

2 に答える 2

0

これを確認してください。理解するのに役立ちます。これは Jquery で作成されたものですが、別の解決策をよりハードコード化したものを見つけることができます (これで問題が解決しない場合は、私がお手伝いします)。

http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_trans_reverse

<a href="#pagetwo" data-transition="slide">ID「pagetwo」のdivにスライドする場合

<a href="#pageone" data-transition="slide" data-direction="reverse">逆のデータ方向を実行し、「pageone」で div に戻り、逆にスライドする場合。

お役に立てれば。

于 2016-06-16T20:04:17.303 に答える