javascript - 为什么设置css left属性会导致其关闭8？

这是一个小提琴。 http://jsfiddle.net/p31L86wg/4/

理想情况下，绿色框应始终位于容器的中心，但是出于某种原因，当我设置left属性时，它选择在我告诉它假设的像素值之前停止8个像素。

angular.module('website', ['ngAnimate'])
.controller('MainCtrl', function ($scope) {
    $scope.products = [
        {name: 'p1'},
        {name: 'p2'},
        {name: 'p3'},
        {name: 'p4'},
        {name: 'p5'}
    ];
    $scope.currentIndex = 0;

    $scope.setCurrentSlideIndex = function (index) {
        $scope.currentIndex = index;
    };

    $scope.isCurrentSlideIndex = function (index) {
        return $scope.currentIndex === index;
    };
})
.directive('pan', function(panBuckets) {
    return function(scope, elm, attr) {
        elm.css('position', 'relative');
        var parentWidth = elm.parent().width();
        elm.css('left', Math.floor(parentWidth/2)-(70/2)+'px');
        scope.pan = function(vector) {
          var bucket = panBuckets[attr['pan']];
          if (bucket) {
              var result = bucket.selectNewItem(bucket.selectedIndex-vector);
              var rect = elm[0].getBoundingClientRect();
              console.log('amount moved',rect.left, (vector*70)+'px',rect.left+(vector*70)+'px');
              if (result!==false) elm.css('left', rect.left+(vector*70)+'px');
              console.log(bucket.selectedItem[0].getBoundingClientRect().left, rect.left);
          }
        };
    };
})
.service('panBuckets', function() {
    return {};
})
.directive('panItem', function(panBuckets) {
    var itemBuckets = panBuckets;
    return function(scope, elm, attr) {
        var bucket = itemBuckets[attr['panItem']];
        if (!bucket) {
            itemBuckets[attr['panItem']] = [];
            bucket = itemBuckets[attr['panItem']];
            elm.addClass('product-active');
            bucket.selectedItem = elm;
            bucket.selectNewItem = function(idx) {
                if (idx < 0) idx = 0;
                if (bucket.selectedIndex==idx) return false;
                if (!bucket[idx]) return false;
                bucket.selectedItem.removeClass('product-active');
                bucket.selectedItem = bucket[idx];
                bucket.selectedItem.addClass('product-active');
                bucket.selectedIndex = idx;
                return idx;
            };
            bucket.selectedIndex = 0;
        }
        bucket.push(elm);
        scope.panBucket = bucket;
    };
})
;

最佳答案

相对位置在尝试实现这种定位时有点怪异，因为它将项目保持在“适当位置”，然后重新放置它，这会产生一些怪异的行为。

一个有效且简便的解决方案是将盒子容器的位置更改为绝对位置，并将容器的位置更改为相对位置。这样可以保证精度。

P.s.稍微有点题外话，但是这种方式的动画（围绕元素移动）可以通过转换转换更好地完成，速度要快得多（在可能的情况下，处理会移交给GPU并进行更多优化）。

关于javascript - 为什么设置css left属性会导致其关闭8？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26663969/