动画或变换方法？

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

您可以使用 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 link

Answer 2

只需 CSS3 即可！检查这个 fiddle:

创建 <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;
}

希望对您有所帮助！

动画或变换方法？

animations or transform method?

css

animation

css-transitions