[英]Slide div from left to right in Angular
在這個小程序中,我有一個div,當用戶單擊復選框時,該div應該在過渡中從左移到右。 而是,div只是隱藏並顯示在新位置。 如何在Angular中實現過渡效果?
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;
});
答案是:您需要在類名稱后使用-add
和-remove
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.