Javascript 如何使用CSS缩小并从右向左转换？

我有后端开发人员（nodejs）的背景，我开始开发web应用程序。所以我对HTML5，CSS真的很陌生。您可以检查这个小型web应用程序

现在我想向web应用程序添加一些动画。第一个动画是当前状态的缩小和新状态从右到左的转换，我不知道从哪里开始。我使用

ui路由器

，

Restangular

和

ngAnimate

作为AngularJS依赖项，使用

LESS

进行CSS预处理

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

---

谢谢。

你的问题还不够清楚，但据我所知，这里有一个例子可以帮助你。您可以在javascript中向元素添加一个类，并使用CSS翻译和转换：

var button=document.getElementById（'button'），
box=document.getElementById（'box'））
addEventListener（'click'，function（）{
box.classList.add（“移动”）；
});
div{
宽度：100px；
高度：100px；
保证金：0自动；
背景颜色：橙色；
过渡：所有1；
}
钮扣{
显示：块；
宽度：100px；
保证金：0自动；
}
.搬家{
转换：转换（-200px，0）；
高度：50px；
宽度：50px；
}

单击我
寻求代码帮助的问题必须包括所需的行为、特定的问题或错误以及在问题本身中重现所需的最短代码。谢谢你的回答。英语不是我的语言，我还在学习，所以我很难真正清楚地表达我的想法。现在，您向我展示了如何缩小比例，我如何推动（从右到左）第二个框来代替第一个框？因此，变换是在第一个框的右侧隐藏第二个框，第一个框缩小并淡出，第二个框推到左侧并淡入。