2つの状態が必要です。最初の要素は要素1を中心にしています。クリックがアクティブになると、別の要素（要素2）が右（アニメーション）プッシュ要素から片方だけスライドして、両方の要素がページの中央に配置されます（第2の状態）。次に、ng-clickが再度トグルされると、逆のことが起こり、要素2が右側のビューから外にスライドし、要素1が元の最初の状態に戻されます。 
スライドアニメーションで1つの要素と2つの要素を横に切り替える - AngularJS
私はこれがどのように見えるかのサンプルを追加しました。概念は単純です。最初にangleのng-classディレクティブを使用して、コントローラのプロパティに基づいてcssクラスを追加および削除します。このプロパティは、最初の要素のng-clickに切り替わります。次に、コンテンツをラップする要素にcss3トランジションを追加します。したがって、最初の要素の幅が100% -> 50%になると、2番目の要素の幅は0% -> 50%になります。それらは同じ遷移クラスを共有するため、2番目の要素は最初の要素が縮小するのと同じ割合で展開されます。
var myApp = angular.module('myApp',[]);
myApp.controller('MainCtrl', MainCtrl);
function MainCtrl($scope) {
$scope.showFull = true
}.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;
}<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>前の回答の上に若干の改善誰かがボタンを使ってスライドさせる必要がある場合。 この実装は、2つのdiv間を移動するのに非常に簡単です。 @Sasang
のおかげvar myApp = angular.module('myApp',[]);
myApp.controller('MainCtrl', MainCtrl);
function MainCtrl($scope) {
$scope.showFull = true
}.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;
}<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>