Angularjs 按角度从左向右滑动div

我有一个div，当用户单击复选框时，它应该在转换中从左向右移动。相反，div只是隐藏并显示在新位置。如何实现角度转换效果

HTML:

Javascript:

var app = angular.module("app", ['ngAnimate']);
app.controller('ctl', function($scope) {
  $scope.checked = true;
});

---

这就是答案：您需要在类名后使用

-add

和

-remove

---

您需要使用关键帧动画或js来制作这种类型的动画。这意味着，当选中输入时，将触发关键帧动画，以在特定时间段内每次增加左值1 px。

.panel{
  position: fixed;
  background:orange;
  width:100px;
  height:30px;
  top: 10px;
}

.class1{
  left: 80px;
}

.class2{
  left: 240px;
}


.class1.ng-show-add-active, .class1.ng-show-remove-active {
transition: all ease-in-out 2s;
}


.class2.ng-show-add-active, .class2.ng-show-remove-active {
transition: all ease-in-out 2s;
}

var app = angular.module("app", ['ngAnimate']);
app.controller('ctl', function($scope) {
  $scope.checked = true;
});