Question

In this plunk我有一个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;
});

Answer 1

答案是：您需要在课程名称后面使用FirefoxProfile profile = new FirefoxProfile(); profile.setPreference("javascript.enabled", false); driver = new FirefoxDriver(profile); driver.get();和-add。

PLUNK

在Angular中从左到右滑动div

1 个答案: