如何使用 CSS 缩小并从右到左翻译？

Question

我有后端开发人员 (nodejs) 的背景，我开始开发 Web 应用程序。所以我对 HTML5、CSS 真的很陌生。可以查看小web应用here。

现在我想向 Web 应用程序添加一些动画。第一个动画是当前状态的缩小和新状态从右到左的平移，我不知道从哪里开始。我使用 ui-router、Restangular 和 ngAnimate 作为 AngularJS 依赖项，LESS 用于 CSS 预处理。

知道如何实现这些动画（缩小当前状态并从右到左转换下一个状态）？

谢谢。

Answer 1

您的问题不够清楚，但据我了解，这是一个可以帮助您的示例。您可以在 javascript 中为您的元素添加一个类并使用 CSS 翻译和转换：

var button = document.getElementById('button'),
  box = document.getElementById('box')

button.addEventListener('click', function() {
  box.classList.add("move");
});

div {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: orange;
  transition: all 1s;
}
button {
  display: block;
  width: 100px;
  margin: 0 auto;
}
.move {
  transform: translate(-200px, 0);
  height: 50px;
  width: 50px;
}

<div id="box"></div>
<button id="button">click me</button>