如何使用AngularJS和CSS爲兩個獨立的div創建動畫效果？

我有2個div，他們見面在屏幕中間。最初，它們都是同時顯示的。當我點擊左邊的按鈕時，左邊的div翻譯並縮放以填滿屏幕，居中。然而，正確的div保持在它的位置，當它需要與左邊的div一起向右滑動直到它離開屏幕時，才能進行流暢的運動。右按鈕也是如此，反之亦然。當點擊右鍵時，右側div翻譯和縮放以填滿屏幕，居中。同樣，這裏的問題是左邊的div保持放置，當它應該順利地用右邊的div進行動畫時，與左邊相同，直到它離開屏幕。不要介意那些亂七八糟的代碼，因爲我已經嘗試了很多東西，還沒有把它清理乾淨。單擊按鈕時，兩個幻燈片應同時滑動，並且方向取決於單擊哪個按鈕。如何使用AngularJS和CSS爲兩個獨立的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%); 
}

以下是文件：

 <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>

來源

2015-09-28 brirober

你能提供codepen？ – Saar

我不能，這是一個私人項目，信息披露是有限的。 – brirober

你可以試試這個angular-flippy。

來源

2015-09-28 08:27:46 Shrinath

我認爲你可以使用動畫不轉換你可能需要左進，右出，右進，右出動畫，當改變時，設置班級側入和其他側出到

// Code goes here 
 

 

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

 
testApp.controller('t', ['$scope', 
 
    function($scope) { 
 
    $scope.options = ['separated', 'binded']; 
 
    $scope.data = ['', '']; 
 
    $scope.current = -1; 
 

 

 
    $scope.goleft = function() { 
 
     if ($scope.current < 0) { 
 
     $scope.current = $scope.data.length - 1; 
 
     } else { 
 
     $scope.data[$scope.current] = 'left-out'; 
 
     $scope.current++; 
 
     if ($scope.current > $scope.data.length - 1) { 
 
      $scope.current = 0 
 
     } 
 
     } 
 
     $scope.data[$scope.current] = 'right-in'; 
 

 
    }; 
 

 
    $scope.goright = function() { 
 

 
     if ($scope.current < 0) { 
 
     $scope.current = 0; 
 
     } else { 
 
     $scope.data[$scope.current] = 'right-out'; 
 
     $scope.current--; 
 
     if ($scope.current < 0) { 
 
      $scope.current = $scope.data.length - 1 
 
     } 
 
     } 
 
     $scope.data[$scope.current] = 'left-in'; 
 
    }; 
 

 

 
    } 
 
]);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="//cdn.bootcss.com/angular.js/1.4.5/angular.js"></script> 
 
    <script src="http://code.angularjs.org/1.4.5/angular-animate.js"></script> 
 

 
    <style> 
 
    .box { 
 
     width: 100%; 
 
     background: green; 
 
     height: 100px; 
 
     position: absolute; 
 
     left: 0; 
 
     top: 120px; 
 
     visibility: hidden; 
 
     -webkit-transition: visibility 0s linear 0.5s; 
 
    } 
 
    .left-in { 
 
     -webkit-animation: leftin 0.5s linear; 
 
     -webkit-transition: visibility 0s; 
 
     visibility: visible; 
 
    } 
 
    .right-in { 
 
     -webkit-animation: rightin 0.5s linear; 
 
     -webkit-transition: visibility 0s; 
 
     visibility: visible; 
 
    } 
 
    .left-out { 
 
     -webkit-animation: leftout 0.5s linear; 
 
    } 
 
    .right-out { 
 
     -webkit-animation: rightout 0.5s linear; 
 
    } 
 
    @-webkit-keyframes leftin { 
 
     0% { 
 
     -webkit-transform: translate(-100%); 
 
     } 
 
     100% { 
 
     -webkit-transform: translate(0); 
 
     } 
 
    } 
 
    @-webkit-keyframes rightin { 
 
     0% { 
 
     -webkit-transform: translate(100%); 
 
     } 
 
     100% { 
 
     -webkit-transform: translate(0); 
 
     } 
 
    } 
 
    @-webkit-keyframes leftout { 
 
     0% { 
 
     -webkit-transform: translate(0); 
 
     } 
 
     100% { 
 
     -webkit-transform: translate(-100%); 
 
     } 
 
    } 
 
    @-webkit-keyframes rightout { 
 
     0% { 
 
     -webkit-transform: translate(0); 
 
     } 
 
     100% { 
 
     -webkit-transform: translate(100%); 
 
     } 
 
    } 
 
    .box.red { 
 
     background: yellow; 
 
    } 
 
    body { 
 
     overflow: hidden; 
 
    } 
 
    </style> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="test"> 
 
    <div ng-controller="t"> 
 
    {{data}} 
 
    <br>{{current}} 
 
    <br> 
 
    <a ng-click="goleft()">go left!!</a> 
 
    <a ng-click="goright()">go right!!</a> 
 
    <div class="box" ng-class="''+data[0]">left</div> 
 
    <div class="box red" ng-class="''+data[1]">right</div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-09-28 11:26:45

每次我使用-webkit-animation或其變體時，它都可以工作。我也有適當的腳本參考。 – brirober

你有什麼想法，爲什麼我的項目不能使用這種方法？ – brirober

你的項目現在看起來像什麼？使用動畫應該沒問題 –

如何使用AngularJS和CSS爲兩個獨立的div創建動畫效果？

回答

相關問題