在Angular中從左到右滑動div

In this plunk我有一個div，應該在用戶點擊複選框時從左到右移動。相反，該div只是隱藏並顯示在新的位置。如何在Angular中實現過渡效果？在Angular中從左到右滑動div

HTML：

Move <input type="checkbox" ng-model="checked" /> 
<div class="panel" ng-class="{ 'class1' : checked, 'class2' : !checked }"></div>

CSS：

.panel{ 
    position: fixed; 
    background:orange; 
    width:100px; 
    height:30px; 
    top: 10px; 
} 

.class1{ 
    left: 80px; 
} 

.class2{ 
    left: 240px; 
} 


.class1.ng-show-add-active, .class1.ng-show-remove-active { 
transition: all ease-in-out 2s; 
} 


.class2.ng-show-add-active, .class2.ng-show-remove-active { 
transition: all ease-in-out 2s; 
}

的Javascript：

var app = angular.module("app", ['ngAnimate']); 
app.controller('ctl', function($scope) { 
    $scope.checked = true; 
});

來源

2015-06-29 ps0604

你需要使用關鍵幀動畫或JS做的動畫類型。意味着當檢查輸入時，它會觸發關鍵幀動畫，在特定時間段內每次增加左邊的值1px。 – floor

這就是答案：你需要使用-add和-remove類名之後。

PLUNK

來源

2015-06-29 15:28:17 ps0604

在Angular中從左到右滑動div

回答

相關問題