我有一个 div，我正在应用 css3 转换将其向右移动(向其添加移动类)和向左移动(从中删除移动类)。添加移动类使我的 div (id=container) 向右移动后，我希望能够在第二次添加移动类后再次使 div 向右移动。当分别单击“向右移动”和“向左移动”按钮时，使用 jquery 添加或删除 Move 类。
这是我的代码:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#bMoveRight').on('click', function(e){
$('#container').addClass('move');
});
$('#bMoveLeft').on('click', function(e){
$('#container').removeClass('move');
});
});
</script>
<style>
#container{
width:100px;
height:100px;
background-color:red;
box-shadow:5px 5px 10px #000;
word-wrap:break-word;
transition: translateX 2s;
-webkit-transition: translateX 2s;
}
.move{
transform: translateX(100px);
-webkit-transform: translateX(100px);
}
</style>
</head> (should match the opening <head> tag, omitted due to restraints on the posting)
<body>
<div id="container">This is a good testing container that I hope will behave itself</div>
<p><button id="bMoveLeft">Move left</button>
<button id="bMoveRight">Move right</button></p>
</body>
最佳答案
没有办法对一个元素应用同一个类两次。您可以做的是检查当前应用到元素的类，然后应用正确的转换类(move2、move3 等)，每个类都有越来越大的转换属性:
.move2 {
transform: translateX(200px);
-webkit-transform: translateX(200px);
}
关于jquery - 如何重复应用 css3 转换到 div 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14746877/