Javascript 我如何用AngularJS和CSS单击两个单独的div来制作动画？ 我有2个div，它们在屏幕中间居中。它们最初同时显示。当我单击左按钮时，左div将平移并缩放以填充屏幕，居中。但是，当右div需要与左div一起向右滑动直到脱离屏幕时，右div将保持在原来的位置，以便进行流体运动。右按钮也是如此，反之亦然。单击右按钮时，右div将平移并缩放以填充屏幕，居中。同样，这里的问题是左div保持不变，此时它应该以与右div相同的方式向左平滑地设置动画，直到它离开屏幕。不要介意这些乱七八糟的代码，因为我已经尝试了很多东西，但还没有把它们全部清理干净。单击按钮时，两张幻灯片应同时滑动，方向取决于单击的按钮

以下是CSS动画：

.side-left.ng-hide {
    display:block!important;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.side-right.ng-hide {
    display:block!important;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

文件如下：

---

你可以试试这个。

你可以试试这个。

我认为你可以使用动画而不是过渡 你可能需要左入、左出、右入、右出的动画， 更改时，将类的一侧设置为in，另一侧设置为out

//代码在这里
var testApp=angular.module（'test'，[]）；
testApp.controller（'t'，['$scope'，
职能（$范围）{
$scope.options=['separated'，'binded']；
$scope.data=[''，]；
$scope.current=-1；
$scope.goleft=函数（）{
如果（$scope.current<0）{
$scope.current=$scope.data.length-1；
}否则{
$scope.data[$scope.current]=“遗漏”；
$scope.current++；
如果（$scope.current>$scope.data.length-1）{
$scope.current=0
}
}
$scope.data[$scope.current]=“右入”；
};
$scope.goright=函数（）{
如果（$scope.current<0）{
$scope.current=0；
}否则{
$scope.data[$scope.current]='right out'；
$scope.current--；
如果（$scope.current<0）{
$scope.current=$scope.data.length-1
}
}
$scope.data[$scope.current]='left in'；
};
}
]);

.盒子{
宽度：100%；
背景：绿色；
高度：100px；
位置：绝对位置；
左：0；
顶部：120px；
可见性：隐藏；
-webkit转换：可见性0s线性0.5s；
}
.留在{
-webkit动画：leftin 0.5s线性；
-webkit转换：可见性0；
能见度：可见；
}
.马上{
-webkit动画：右0.5s线性；
-webkit转换：可见性0；
能见度：可见；
}
.遗漏{
-webkit动画：左0.5s线性；
}
.马上{
-webkit动画：右转0.5s线性；
}
@-webkit关键帧leftin{
0% {
-webkit转换：翻译（-100%）；
}
100% {
-webkit转换：转换（0）；
}
}
@-webkit关键帧位于右侧{
0% {
-webkit转换：翻译（100%）；
}
100% {
-webkit转换：转换（0）；
}
}
@-webkit关键帧留空{
0% {
-webkit转换：转换（0）；
}
100% {
-webkit转换：翻译（-100%）；
}
}
@-webkit关键帧右起{
0% {
-webkit转换：转换（0）；
}
100% {
-webkit转换：翻译（100%）；
}
}
.盒子，红色{
背景：黄色；
}
身体{
溢出：隐藏；
}
{{data}}

{{current}}


向左走！！
向右走！！
左边
正确的
我认为你可以使用动画而不是过渡
你可能需要左入、左出、右入、右出的动画，
更改时，将类的一侧设置为in，另一侧设置为out


//代码在这里
var testApp=angular.module（'test'，[]）；
testApp.controller（'t'，['$scope'，
职能（$范围）{
$scope.options=['separated'，'binded']；
$scope.data=[''，]；
$scope.current=-1；
$scope.goleft=函数（）{
如果（$scope.current<0）{
$scope.current=$scope.data.length-1；
}否则{
$scope.data[$scope.current]=“遗漏”；
$scope.current++；
如果（$scope.current>$scope.data.length-1）{
$scope.current=0
}
}
$scope.data[$scope.current]=“右入”；
};
$scope.goright=函数（）{
如果（$scope.current<0）{
$scope.current=0；
}否则{
$scope.data[$scope.current]='right out'；
$scope.current--；
如果（$scope.current<0）{
$scope.current=$scope.data.length-1
}
}
$scope.data[$scope.current]='left in'；
};
}
]);

.盒子{
宽度：100%；
背景：绿色；
高度：100px；
位置：绝对位置；
左：0；
顶部：120px；
可见性：隐藏；
-webkit转换：可见性0s线性0.5s；
}
.留在{
-webkit动画：leftin 0.5s线性；
-webkit转换：可见性0；
能见度：可见；
}
.马上{
-webkit动画：右0.5s线性；
-webkit转换：可见性0；
能见度：可见；
}
.遗漏{
-webkit动画：左0.5s线性；
}
.马上{
-webkit动画：右转0.5s线性；
}
@-webkit关键帧leftin{
0% {
-webkit转换：翻译（-100%）；
}
100% {
-webkit转换：转换（0）；
}
}
@-webkit关键帧位于右侧{
0% {
-webkit转换：翻译（100%）；
}
100% {
-webkit转换：转换（0）；
}
}
@-webkit关键帧留空{
0% {
-webkit转换：transl
        <div class="section side-left" ng-hide="slide1">
            <a ng-click="slide1=!slide1">
                <i class="fa fa-chevron-circle-left pull-left"></i>
            </a>
        </div>

        <div class="section side-right" ng-hide="slide2">
            <a ng-click="slide2=!slide2">
                <i class="fa fa-chevron-circle-right pull-right"></i>
            </a>
        </div>