jQuery 如何使用javascript变量设置转换属性的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18625807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set value of transform property using javascript variable
提问by user1873632
I found a similar answer to this on here, but it doesn't work for me. I am trying to make a scrolling single page layout, but by using css3 animations instead of jquery animate. What i'm shooting for is taking the variable set as the position of the hash and passing it into the transformX(). Here is what i have so far.
我在这里找到了类似的答案，但它对我不起作用。我正在尝试制作滚动单页布局，但使用 css3 动画而不是 jquery 动画。我正在拍摄的是将变量集作为散列的位置并将其传递给transformX()。这是我到目前为止所拥有的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<section id="wrapper">
<div class="nav-wrapper">
<nav>
<ul>
<li class="nav-li"><a href="#intro">home</a></li>
<li class="nav-li"><a href="#work">work</a></li>
<li class="nav-li"><a href="#about">about</a></li>
<li class="nav-li"><a href="#contact">contact</a></li>
</ul>
</nav>
</div>
<div class="home">
<div id="intro" class="content">
</div>
</div>
<div class="portfolio">
<div id="work" class="content">
</div>
</div>
<div id="about" class="about">
</div>
<div id='contact' class="connect">
</div>
<footer>
</footer>
</section>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/main.js"></script>
</body></html>
Relevant CSS:
相关CSS：
html,body {
height:100%;
text-align:center;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
}
and Relevant Javascript:
和相关的Javascript：
$(".nav-li > a").click(function(event){
event.preventDefault();
//calculate destination place
var dest;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
$('body').css('transform', 'translateY('+ dest +')');
//('-webkit-transform', 'translateY('+ dest +')');
//('-ms-transform', 'translateY('+ dest +')');
//('-moz-transform', 'translateY('+ dest +')');
//('-o-transform', 'translateY('+ dest +')');
console.log(dest)
});
I am definitely getting the right value for 'dest' as you can see with console.log(dest). Is this not possible?
正如您在 console.log(dest) 中看到的那样，我绝对得到了“dest”的正确值。这不可能吗？
回答by DGS
Change your code from
更改您的代码
$('body').css('transform', 'translateY(' + dest + ')');
$('body').css('transform', 'translateY(' + dest + ')');
to
到
$('body').css('transform', 'translateY(-' + dest + 'px)');
$('body').css('transform', 'translateY(-' + dest + 'px)');
You need to specify a unit for translation. the -ve sign is to move the body upwards rather than downwards which is what you would expect.
您需要指定一个翻译单位。-ve 符号是向上移动身体而不是向下移动，这是您所期望的。
