CSS滑入和滑出动画溢出问题

时间：2016-01-11 20:14:27

标签： html css angularjs css-animations ng-animate

我试图在屏幕上设置瓷砖列表的动画，同时在屏幕上设置新的切片列表。

我使用Angular的ng-for来遍历一系列可见项，因此技术上只有一个列表，但Angular的ngAnimate模块保留了被驱逐的物品一直存在，直到动画完成。

我的问题是，每当两个图块列表同时在动画中间显示在屏幕上时，一个会溢出并最终低于另一个。

这就是发生的事情：

Image

这就是我想要的：

enter image description here

我已经尝试过搞乱CSS转换，绝对定位，但我似乎无法做到正确。

这里有一个小小的例子：http://jsfiddle.net/soethzfm/7/

＆＃13;
＆＃13; 
(function() {
  var app = angular.module("animationApp", ["ngAnimate"]);

  app.controller('FrameController', ['$scope',
    function($scope) {

      $scope.message = 'Hello world';
      $scope.items = [];
      $scope.visibleItems = [];
      for (var i = 3; i < 9; i++) {
        $scope.items.push({
          name: 'Item ' + (i - 2),
          color: "#" + (i) + "0" + (i % 5) + "0" + (i % 4) + '0'
        });
      }


      $scope.firstThree = true;
      $scope.selectNextItems = function() {
        if ($scope.firstThree) {
          $scope.firstThree = false;
          $scope.visibleItems = [$scope.items[0], $scope.items[1], $scope.items[2]];
        } else {
          $scope.firstThree = true;
          $scope.visibleItems = [$scope.items[3], $scope.items[4], $scope.items[5]];
        }
      }
      $scope.selectNextItems();
    }
  ]);
})()
＆＃13; 
.item-container {
  width: 400px;
  border: 1px solid red;
  overflow: hidden;
}
.item {
  color: white;
  width: 100px;
  height: 150px;
  border: 5px solid #F3F5F6;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.item:hover {
  padding: 2px;
  border: 3px solid blue;
}
/* Animations */

.item.ng-move,
.item.ng-enter,
.item.ng-leave {
  -webkit-transition: 1400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 1400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 1400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 1400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 1400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
.item.ng-enter,
.item.ng-move {
  left: -100%;
}
.item.ng-enter.ng-enter-active,
.item.ng-move.ng-move-active {
  left: 0;
}
.item.ng-leave {
  right: 0;
}
.item.ng-leave.ng-leave-active {
  right: -100%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
<div ng-app="animationApp">
  <div ng-controller="FrameController as vm">

    <button ng-click="selectNextItems()">Next Page</button>

    <div class="item-container">

      <div class="item" ng-repeat="item in visibleItems" ng-style="{'background-color': item.color}">
        {{item.name}}
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：4)

您遇到的问题是由于内容被包装在父容器中。父容器的宽度仅为400px，但每个框的宽度为100px + 2 * 5px（边框）。因此，只有3个盒子可以放在同一条线上，其余的盒子必须缠绕到下一行。当您同时显示所有6个元素时，可以非常清楚地看到这一点。正如您在下面的代码片段中看到的那样，最后3个项目将转到下一行。

注意：我对AngularJS一无所知，所以请原谅我在同时看到所有六个人的可怜尝试。 

(function() {
  var app = angular.module("animationApp", ["ngAnimate"]);

  app.controller('FrameController', ['$scope', function($scope) {
   
    $scope.message = 'Hello world';
    $scope.items = [];
    $scope.visibleItems = [];
    for (var i = 3; i < 9; i++) {
      $scope.items.push({
        name: 'Item ' + (i - 2),
        color: "#" + (i) + "0" + (i % 5) + "0" + (i % 4) + '0'
      });
    }


    $scope.firstThree = true;
    $scope.selectNextItems = function() {
      if ($scope.firstThree) {
        $scope.firstThree = false;
        $scope.visibleItems = [$scope.items[0], $scope.items[1], $scope.items[2], $scope.items[3], $scope.items[4], $scope.items[5]];
      } else {
        $scope.firstThree = true;
        $scope.visibleItems = [$scope.items[3], $scope.items[4], $scope.items[5]];
      }
    }
    $scope.selectNextItems();
  }]);
})()
.item-container {
  width: 400px;
  border: 1px solid red;
  overflow: hidden;
}
.item {
  color: white;
  width: 100px;
  height: 150px;
  border: 5px solid #F3F5F6;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.item:hover {
  padding: 2px;
  border: 3px solid blue;
}
/* Animations */

.item.ng-move,
.item.ng-enter,
.item.ng-leave {
  transition: 1400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
.item.ng-enter,
.item.ng-move {
  left: -80%;
}
.item.ng-enter.ng-enter-active,
.item.ng-move.ng-move-active {
  left: 0%;
}
.item.ng-leave {
  right: 0%;
}
.item.ng-leave.ng-leave-active {
  right: -100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
<div ng-app="animationApp">
  <div ng-controller="FrameController as vm">

    <button ng-click="selectNextItems()">Next Page</button>

    <div class="item-container">

      <div class="item" ng-repeat="item in visibleItems" ng-style="{'background-color': item.color}">
        {{item.name}}
      </div>
    </div>
  </div>
</div>

通过向父容器添加white-space: nowrap设置可以轻松解决此问题。通过这样做，我们可以将所有六个元素排列在同一行上，因此在动画期间看到的不匹配将会消失。

(function() {
  var app = angular.module("animationApp", ["ngAnimate"]);

  app.controller('FrameController', ['$scope', function($scope) {
   
    $scope.message = 'Hello world';
    $scope.items = [];
    $scope.visibleItems = [];
    for (var i = 3; i < 9; i++) {
      $scope.items.push({
        name: 'Item ' + (i - 2),
        color: "#" + (i) + "0" + (i % 5) + "0" + (i % 4) + '0'
      });
    }


    $scope.firstThree = true;
    $scope.selectNextItems = function() {
      if ($scope.firstThree) {
        $scope.firstThree = false;
        $scope.visibleItems = [$scope.items[0], $scope.items[1], $scope.items[2]];
      } else {
        $scope.firstThree = true;
        $scope.visibleItems = [$scope.items[3], $scope.items[4], $scope.items[5]];
      }
    }
    $scope.selectNextItems();
  }]);
})()
.item-container {
  width: 400px;
  border: 1px solid red;
  overflow: hidden;
  white-space: nowrap;
}
.item {
  color: white;
  width: 100px;
  height: 150px;
  border: 5px solid #F3F5F6;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.item:hover {
  padding: 2px;
  border: 3px solid blue;
}
/* Animations */

.item.ng-move,
.item.ng-enter,
.item.ng-leave {
  transition: 1400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
.item.ng-enter,
.item.ng-move {
  left: -80%;
}
.item.ng-enter.ng-enter-active,
.item.ng-move.ng-move-active {
  left: 0%;
}
.item.ng-leave {
  right: 0%;
}
.item.ng-leave.ng-leave-active {
  right: -100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
<div ng-app="animationApp">
  <div ng-controller="FrameController as vm">

    <button ng-click="selectNextItems()">Next Page</button>

    <div class="item-container">

      <div class="item" ng-repeat="item in visibleItems" ng-style="{'background-color': item.color}">
        {{item.name}}
      </div>
    </div>
  </div>
</div>

但正如你在输出中所看到的那样，这些动作似乎并不是无缝的。原因是因为位置设置不应该像他们应该的那样安静。如前所述，我对Angular动画的工作原理知之甚少，因此我无法完全修复它们，但使用相同的位置属性进入，离开和移动将是一个起点。如果我们在事件过程中将位置从left修改为right或反之亦然，则transition效果将无效，并且只会导致即时跳转。你在片段中注意到的另一件事是，我也修改了定位值，使效果看起来很流畅。但这些都是基于试验和错误的基础。我强烈建议您首先使用纯CSS实现整个事物，然后将其移植到AngularJS。

(function() {
  var app = angular.module("animationApp", ["ngAnimate"]);

  app.controller('FrameController', ['$scope', function($scope) {
   
    $scope.message = 'Hello world';
    $scope.items = [];
    $scope.visibleItems = [];
    for (var i = 3; i < 9; i++) {
      $scope.items.push({
        name: 'Item ' + (i - 2),
        color: "#" + (i) + "0" + (i % 5) + "0" + (i % 4) + '0'
      });
    }


    $scope.firstThree = true;
    $scope.selectNextItems = function() {
      if ($scope.firstThree) {
        $scope.firstThree = false;
        $scope.visibleItems = [$scope.items[0], $scope.items[1], $scope.items[2]];
      } else {
        $scope.firstThree = true;
        $scope.visibleItems = [$scope.items[3], $scope.items[4], $scope.items[5]];
      }
    }
    $scope.selectNextItems();
  }]);
})()
.item-container {
  width: 400px;
  border: 1px solid red;
  overflow:hidden;
  white-space: nowrap;
}
.item {
  color: white;
  width: 100px;
  height: 150px;
  border: 5px solid #F3F5F6;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.item:hover {
  padding: 2px;
  border: 3px solid blue;
}

/* Animations */
.item.ng-move,
.item.ng-enter,
.item.ng-leave {
  transition: 1400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
.item.ng-enter,
.item.ng-move {
  left: -80%;
}
.item.ng-enter.ng-enter-active,
.item.ng-move.ng-move-active {
  left: 0%;
}
.item.ng-leave {
  left: -80%;
}
.item.ng-leave.ng-leave-active {
  left: 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
<div ng-app="animationApp">
  <div ng-controller="FrameController as vm">

    <button ng-click="selectNextItems()">Next Page</button>

    <div class="item-container">

      <div class="item" ng-repeat="item in visibleItems" ng-style="{'background-color': item.color}">
        {{item.name}}
      </div>
    </div>
  </div>
</div>

相关问题
最新问题