使用幻灯片动画水平切换一个和两个元素 - AngularJS

Question

我想要两个州。第一个是元素1自身居中。当激活ng-click时，另一个元素（元素2）从右侧（动画）推动元素向侧面滑入一侧，因此两个元素都在页面上居中（第二个状态）。然后，如果再次切换ng-click，则反向发生，元素2向右滑出视图，元素1回到原始的第一个状态，以及如何用angularJS实现这一点的想法？

Answer 1

我已经添加了这个样子的样本。这个概念很简单;首先使用angular＆＃39; ng-class指令根据控制器上的属性添加和删除css类。此属性在第一个元素上通过ng-click切换。然后将css3过渡添加到包装内容的元素。因此，当第一个元素的宽度来自100% -> 50%时，第二个元素的宽度来自0% -> 50%。由于它们共享相同的转换类，因此第二个元素以与第一个元素收缩相同的速率扩展。

＆＃13;

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MainCtrl', MainCtrl);

function MainCtrl($scope) {
   $scope.showFull = true
}

＆＃13;

.content{
  text-align: center;
  transition: width linear 1s;
  overflow:hidden;
  display:inline-block;
}
.content span{
  font-size:10em;
  color: #FFFFFF;
}
.fullWidth{
  width:100%;
}
.halfWidth{
  width:50%;
}
.noWidth{
  width:0;
}
.red{
    background-color: red;
}
.blue{
    background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
  <div class="content red" ng-class="showFull ? 'fullWidth' : 'halfWidth'" ng-click="showFull = !showFull">
      <span>1</span>
  </div><div class="content blue" ng-class="showFull ? 'noWidth' : 'halfWidth'">
      <span>2</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果有人需要使用按钮滑动，则比之前的答案略有改进。 这种实现非常简单，可以在两个div之间滑动。 感谢@Sasang

＆＃13;

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MainCtrl', MainCtrl);

function MainCtrl($scope) {
   $scope.showFull = true
}

＆＃13;

.content{
  text-align: center;
  transition: width linear 0.2s;
  overflow:hidden;
  display:inline-block;
}
.content span{
  font-size:10em;
  color: #FFFFFF;
}
.fullWidth{
  width:100%;
}
.halfWidth{
  width:50%;
}
.noWidth{
  width:0;
}
.red{
    background-color: red;
}
.blue{
    background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
  <div class="content red" ng-class="showFull ? 'fullWidth' : 'noWidth'" >
      <span><button ng-click="showFull = !showFull">Next</button></span>
  </div><div class="content blue" ng-class="showFull ? 'noWidth' : 'fullWidth'">
      <span><button ng-click="showFull = !showFull">Prev</button></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;