为什么负边距无法生效？

Question

当您单击“Resume”时，一些文本会从左侧进入。这是因为我最初给文本负边距。

但是，intro_page 的负边距没有效果。

我想要的是：

1. 当我点击resume_page时，简历文本应该从左侧进入（这个可以实现），intro_page的文本应该向右移动并消失（这个实现不了）。intro_page的负边距似乎无效。为什么？
2. 初始状态下，页面应该除了两个链接以外为空白。当前，intro_page页面被显示出来。resume_page已经被隐藏，符合预期。

简而言之，关于resume_page的所有内容都正常工作。我希望完全相同的事情也发生在intro_page上。

function clicked_resume(OnScreen)
{
    var resume = document.getElementById('resume_page');
    if(OnScreen == 1)
    {
        resume.className = '';
        clicked_about(0);
    }
    else if(OnScreen == 0)
    {
        resume.className = 'unseen';
    }
    
}

function clicked_about(OnScreen)
{
   
    var about = document.getElementById('intro_page');
    if(OnScreen == 1)
    {
        about.className = '';
        clicked_resume(0);

    }
    else if(OnScreen == 0)
    {
        about.className = 'unseen';
    }
}

#intro_page.unseen{
 display: block;
 margin-right: -200px;
}


#intro_page{
 margin-right: 0px;
 display: block;
 -webkit-transition: margin-right 1.5s ease-in;
 transition: margin-right 1.5s ease-in;
}

#resume_page.unseen{
 display: block;
 margin-left: -600px;
}

#resume_page{
 margin-left: 0px;
 display: block;
 -webkit-transition: margin-left 1.0s ease-in;
 transition: margin-left 1.0s ease-in;
}

 <h2 class="title_bar">
<ul>
     
 <li><span onclick = "clicked_about(1)">About</span></li>
 <li><span onclick="clicked_resume(1)">Resume</span></li>
</ul>
     
</h2> 

 
<div id="intro_page" class="unseen">
 <p id="intro_main_text"> I enjoy reading, swimming, jogging, painting and exploring. </p>
 <figure class="intro_pic1">
     <img src="img/award.jpg" alt="Receiving Award" height="50" />
     <figcaption>Award 2015</figcaption>
 </figure>
</div>

<div id="resume_page" class="unseen">
 <p>My resume</p>
</div>
 

- Matt

Answer 1

尝试使用 position: relative 和 right 来代替 margin-right。它更可靠，因为在定位其他元素时不考虑元素的位置，而像 margin 一样。如果您想获得额外的加分，甚至可以使用 transform: translate 代替 right。

function clicked_resume(OnScreen)
{
    var resume = document.getElementById('resume_page');
    if(OnScreen == 1)
    {
        resume.className = '';
        clicked_about(0);
    }
    else if(OnScreen == 0)
    {
        resume.className = 'unseen';
    }
    
}

function clicked_about(OnScreen)
{
   
    var about = document.getElementById('intro_page');
    if(OnScreen == 1)
    {
        about.className = '';
        clicked_resume(0);

    }
    else if(OnScreen == 0)
    {
        about.className = 'unseen';
    }
}

body {
    margin: 0;
    overflow-x: hidden;
}

#intro_page.unseen{
    display: block;
 right: -100%;
}


#intro_page{
 position: relative;
    right: 0px;
 display: block;
 -webkit-transition: right 1.5s ease-in;
 transition: right 1.5s ease-in;
}

#resume_page.unseen{
 display: block;
 left: -600px;
}

#resume_page{
 position: relative;
    left: 0px;
 display: block;
 -webkit-transition: left 1.0s ease-in;
 transition: left 1.0s ease-in;
}

<h2 class="title_bar">
<ul>
     
 <li><span onclick = "clicked_about(1)">About</span></li>
 <li><span onclick="clicked_resume(1)">Resume</span></li>
</ul>
     
</h2> 

 
<div id="intro_page" class="unseen">
 <p id="intro_main_text"> I enjoy reading, swimming, jogging, painting and exploring. </p>
 <figure class="intro_pic1">
     <img src="img/award.jpg" alt="Receiving Award" height="50" />
     <figcaption>Award 2015</figcaption>
 </figure>
</div>

<div id="resume_page" class="unseen">
 <p>My resume</p>
</div>

- Maximillian Laumeister

---

谢谢。您能否解决问题2？intro_page的负边距应该使其最初隐藏（就像resume_page一样被隐藏）。但是，about_page是可见的。 - Matt

无论如何，我每次都能看到“intro_page”。基本上，“intro_page”总是可见的；它只是向右移动了一点。有没有办法在点击“关于”之前隐藏它？ - Matt

@Matt，你想让它像简历页面一样从左边滑入吗？如果是这样，不要使用 right，而是使用负的 left 值和在 left 上进行过渡。或者，使用负的 transform: translate 值并在 transform 上进行过渡。很抱歉这里的过程有些迭代，我不太确定你想要实现什么。 - Maximillian Laumeister

我想要的效果是resume_page从左到右出现，而intro_page从右到左出现。在两种情况下，内容最初都是隐藏的，只有在点击后才会显示。据我所知，使用margin或translate无法实现从右到左的效果。是否有其他方法可以实现这种效果？ - Matt

@Matt 感谢澄清。在这种情况下，我会给你的包含元素（在这种情况下是body）一个overflow-x值为hidden，并且给你的intro_page一个right值为-100%。请参见更新后的示例。 - Maximillian Laumeister

Answer 2

原因在于CSS中元素是从左到右排列的，margin-right永远不会按照你所希望的方式工作。

只需将你的CSS修改为以下内容，它将像魔法一样运行。

 body {
   overflow:hidden
}

#intro_page.unseen{
    transform: translateX(120%);
    transition: transform 1s ease-in;
}
#intro_page{
    transform: translateX(0);
    transition: transform 1s ease-in;
}

#resume_page.unseen{
    transform: translateX(-100%);
    transition: transform 1s ease-in;
}

#resume_page{
    transform: translateX(0);
    transition: transform 1s ease-in;
}

提示：在动画中为了获得更好的性能，始终使用翻译而不是位置、边距、宽度等属性。

http://jsfiddle.net/wgsy6ufx/1/

- Francesco

Answer 3

作为本指南中所述，左右负边距的行为不同：负的margin-left会将样式化元素向左拉，而负的margin-right会将相邻右侧元素向样式化元素拉。它不会移动样式化元素本身。

如果您想要实现您的输出，请使用position: relative和left属性来将您的介绍div定位在最右侧：请参见此fiddle。

- ttzn