Question

我目前正试图在一组不同的面板上实现一些CSS过渡效果，以显示它们是＆＃34;滑入＆＃34;从屏幕外看。我希望它们各自出现在不同的方向（例如从上到下，从左到右等）

据推测，要做到从下到上，从右到左，我只想设置translateX或translateY，但是要有正值，而不是负值。然后对于所有这些，当我希望它们出现在屏幕上时，我只想将值转换为0。

HTML：

<div class="container">
<div id="about" class="panel">
  <h2>About</h2>
  <p>I'm Mike and I don't know!</p>
  <a href="#">Close</a>
</div>

<div id="projects" class="panel">
  <h2>Projects</h2>
  <p>Here are some projects I have worked on.</p>
  <a href="#">Close</a>
</div>

<div id="contact" class="panel">
  <h2>Contact</h2>
  <p>You can find me all over the Internet!</p>
  <a href="#">Close</a>
</div>

<div id="blog" class="panel">
  <h2>Blog</h2>
  <p>Here are some blog posts.</p>
  <a href="#">Close</a>
</div>

<a href="#projects">projects</a>
<a href="#blog">blog</a>
<a href="#about">about</a>
<a href="#contact">contact</a>
</div>

CSS：

.container { 
  overflow:hidden;
  position:relative;
  width:100vw;
  height:100vh;
}

.panel{
    min-width: 100%;
    height: 100%;
    position: absolute;
    box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
    z-index: 2;
    -webkit-transition: transform .8s ease-in-out;
    -moz-transition: transform .8s ease-in-out;
    -o-transition: transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

.panel:target {
    -webkit-transition: transform .8s ease-in-out;
    -moz-transition: transform .8s ease-in-out;
    -o-transition: transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

.panel#contact {
    transform: translateX(110%);
    background-color:whitesmoke;
}

.panel#about {
    transform: translateX(-110%);
    background-color: red;
}

.panel#projects {
    transform: translateY(110%);
    background-color: blue;
}

.panel#blog {
    transform: translateY(-110%);
    background-color: gold;
}

.panel#contact:target{
    transform: translateX(0%);

}

.panel#about:target{
    transform: translateX(0%);
}

.panel#projects:target{
    transform: translateY(0%);
}
.panel#blog:target{
    transform: translateY(0%);
}

请注意＆＃34;关于＆＃34;和＃34;博客＆＃34;链接按预期过渡，而＆＃34;项目＆＃34;和＆＃34;联系＆＃34;链接似乎导致奇怪。那些是具有正值的两个。

我真的很难过：

a。）了解问题究竟是什么 b。）我该如何解决它（如果有的话）

如果有人能够通过这些错误的过渡解释浏览器正在做什么并提供解决方案，那么我将非常感激不尽。 AFAIK，这发生在每个浏览器中（无论如何都支持：target伪元素）。

如果您需要澄清，请告诉我。非常感谢！

更新：未修复，但我注意到如果您为违规元素面板（项目+联系人）设置的值<98％，页面会正常转换，但不会在屏幕上隐藏。不确定这意味着什么，但如果它有帮助......

更新2.0：感谢您的评论，伙计们！我尝试添加一个容器，并更新了HTML和CSS以反映这一点。有问题的更改是包装面板的容器div，以及该容器的以下CSS：

.container { 
  overflow:hidden;
  position:relative;
  width:100vw;
  height:100vh;
}

我仍然有类似的行为 - 这也在Codepen中更新。我想现在我已经理解了这个问题，但是我不太确定为什么在应用转换之前页面仍然会跳转到相关元素。我可以想象有一些hacky方法可以解决这个问题，但我宁愿这样做，也就是＆＃34;对＆＃34;方式。

Answer 1

我决定使用：target并试图让它成为纯粹的CSS并不是真正的方法，并且只是以相当简单的方式使用Javascript。

获得的经验教训：除非你真的需要，否则不要尝试使用Pure CSS。

CSS3过渡，使用translateX + translateY设置为正值，似乎没有正确转换

1 个答案: