在Angular中绘制div时出现闪烁问题

Question

In this plunk我有一个需要拖动鼠标的div。我正在使用鼠标向上/移动/向下事件。我遇到的问题是当我向下拖动时div会“闪烁”。如何解决这个问题？

HTML

<style>
  .frame {
      width: 300px;
      height: 300px;
      background-color: orange;
      position: relative;
  }
  .sel{
     border:2px solid black;
     background-color: #ffffff;
     position:absolute;
  }
</style>
<div class="frame" ng-mousedown="mouseDown($event)" 
                   ng-mousemove="mouseMove($event)" 
                   ng-mouseup="mouseUp()">
  <div class="sel" ng-show="show"
       ng-style="{top:selTop+'px', left:selLeft+'px', width:selWidth+'px', height:selHeight+'px'}"></div>
</div>

使用Javascript：

var app = angular.module('app', []);
app.controller('ctl', function ($scope) {

     $scope.startPoint = {};
     $scope.show = false;

     $scope.mouseDown = function(event) {
            $scope.startPoint = { x: event.offsetX, y: event.offsetY };
            $scope.show = true;
        };


       $scope.mouseMove = function(event) {
            if (!$scope.startPoint.x)
                return;
            $scope.selTop = $scope.startPoint.y;
            $scope.selLeft = $scope.startPoint.x;
            $scope.selHeight = event.offsetY - $scope.startPoint.y;
            $scope.selWidth = event.offsetX - $scope.startPoint.x;
       };

       $scope.mouseUp = function() {
            $scope.startPoint = {};
            $scope.show = false;
       };

});

Answer 1

只需添加这些css属性

with

查看plunker http://embed.plnkr.co/9WntGyBLQxYSxkFjDAy2/