在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

回答

相关问题