javascript - 使用 Angular 为屏幕上的 div 设置动画

Question

目前，我有一个包含以下内容的 div:

<div ng-style="{'left': PageMap.ColumnWrap.OverviewPanelLeft + 'px'}"></div>

当我按下右键时，我附加了将 PageMap.ColumnWrap.OverviewPanelLeft 更改为另一个数字的事件。这显然将 div 弹到了那个点。完美。

现在我不想轻弹到那个点，而是想使用具有缓动等功能的动画框架为那个点设置动画。

我该怎么做？

Answer 1

在这种情况下你不需要动画框架。只需简单的 CSS 转换规则就可以解决问题:

div {
    transition: left .5s ease;    
    -webkit-transition: left .5s ease;    
}

显然，您最好让选择器更具体(类、父选择器等)，您不希望过渡应用于所有 div 元素。

angular.module('demo', []).controller('MainCtrl', function($scope, $timeout) {
    $scope.PageMap = {ColumnWrap: {OverviewPanelLeft: 50}};
    
    $timeout(function() {
        $scope.PageMap.ColumnWrap.OverviewPanelLeft = 150;
    }, 1000)
});

div {
    position: absolute;
    width: 100px;
    height: 100px;
    background: coral;
    transition: left .5s ease;    
    -webkit-transition: left .5s ease;    
}

<script src="https://code.angularjs.org/1.4.3/angular.js"></script>    

<section ng-app="demo" ng-controller="MainCtrl">
    <div ng-style="{'left': PageMap.ColumnWrap.OverviewPanelLeft + 'px'}"></div>  
</section>