Question

当您点击“恢复”时，某些文字会从左侧进入。这是因为我最初对文本给出了负余量。

但intro_page的负余量没有效果。

我想要的是：

当我点击resume_page时，简历的文字应该从左边开始（这个工作），intro_page的文字应该向右（这不起作用）。

intro_page的负边距似乎不起作用。那是为什么？
最初，页面应为空，但两个链接除外。目前，会显示intro_page页面。 <{1>}根据需要正确隐藏。

简而言之，关于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;
}

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>

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/

Answer 3

正如您在this guide中所读到的那样，左右边距的行为不相同：负margin-left向左拉样式元素，而负{ {1}}将相邻的右元素拉向样式元素。它不会移动样式元素本身。

如果您想获得输出，请使用margin-right和position: relative属性将您的介绍div放在最右侧：请参阅this fiddle。

为什么负保证金不起作用？

3 个答案: