如何缩小和转换从右到左使用CSS

How to scale down and translate right to left using CSS?

本文关键字：从右到左 转换 CSS 何缩小 缩小      更新时间：2023-09-26

我有后台开发人员(nodejs)的背景，我开始开发web应用程序。所以我对HTML5和CSS还是个新手。你可以在这里查看这个小的web应用程序。

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

我该如何实现这些动画(缩小当前状态并将下一个状态从右向左平移)?

谢谢。

你的问题不太清楚，但据我所知，这里有一个例子可以帮助你。你可以在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>

相关文章：