动画或变换方法

Question

我想在点击按钮后移动一个div如果我写这个css：

div.box {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  -ms-transform: translate(50px, 100px);  /* IE 9 */
  -webkit-transform: translate(50px, 100px);  /* Safari */
  transform: translate(50px, 100px);  /* Standard syntax */
}

然后问题是，当我打开页面时，我看不到div的移动，所以我必须使用动画，如果我使用动画，问题是div将自动开始移动。我的问题是我应该用什么？动画还是变换？我怎么能？

Answer 1

只需CSS3就可以实现！检查这个小提琴：

创建<label>和<input>元素：

<label class="label-btn" for="clickme">Click me!</label>
<input type="checkbox" id="clickme" />    
<div class="box"></div>

然后，将这个小技巧CSS应用于复选框，并将标签设置为按钮样式：

#clickme {
    display: none;
}
#clickme:checked + div.box {
  -ms-transform: translate(50px,100px); /* IE 9 */
  -webkit-transform: translate(50px,100px); /* Safari */
  transform: translate(50px,100px); /* Standard syntax */
}
.label-btn {
    cursor: pointer;
    padding: 10px;
    background: pink;
    display:inline-block;
}

此外，在div.box中添加一个转换属性，这样转换就可以顺利运行（如果需要，可以更改转换时间）：

div.box {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  transition: 1s all;
}

希望它能有所帮助！

Answer 2

您可以使用jquery。

css：

div.box {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  transition-duration=2s; //or any duration else
}

jquery:

$("button").click(function() {
  $(".box").css({
    "transform": "translate(50px,100px)",
    "-webkit-transform": "translate(50px,100px)",
    "-ms-transform": "translate(50px,100px)"
  });
});

JSFiddle链接