页面过渡（滑入式）不适用于 CSS3答案

【问题标题】：Page transition (slide-in) not working with CSS3页面过渡（滑入式）不适用于 CSS3
【发布时间】：2013-08-06 12:17:41
【问题描述】：

我正在创建一个单页网站，当单击链接时，我的内容会在页面上滑动（从左到右，在 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>

我会永远感激任何人的帮助！

【问题讨论】：

标签： css css-transitions transitions

【解决方案1】：

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

【讨论】：

【解决方案2】：

检查这个，它会帮助你理解，这是用 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 并以相反的方式滑动。

希望这会有所帮助。

【讨论】：