Question

我有后台开发人员（nodejs）的背景，我开始开发Web应用程序。所以我是HTML5，CSS的新手。您可以查看小型网络应用程序here。

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

任何想法如何实现这些动画（缩小当前状态并从右向左翻译到下一个状态）？

感谢。

Answer 1

你的问题不够明确，但据我所知，这是一个帮助你的例子。您可以在javascript中为元素添加一个类，并使用CSS translate和transform：

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>

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

1 个答案: