2

我正在创建一个单页网站，当单击链接时，我的内容会在页面上滑动（从左到右，在 1 秒内缓动）。不幸的是，我在过渡到工作方面完全没有运气。

我可以使用 :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

从您设置它的方式来看，您似乎正在尝试创建一个响应式的轮播？如果是这种情况，您仍然需要一些 JS 来更新 css，例如添加另一个类。目前没有什么可以转换的，因为你的 CSS 没有改变。

于 2013-08-05T17:39:41.620 回答
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 回答