看看这里的代码:Simple Angular animation example 我想使用 Angular 动画在我的网页中生成类似的效果。唯一的区别是，在上面的示例中，代码在获取不同的 html 文件时生成 slider 效果。我的项目对此略有修改。相反，我想显示同一个 html 文件的两个不同的 div。单击按钮一时，我想显示一个 div。现在我们将其称为 div1。单击按钮 2 时，我想显示 div2 并通过显示滑动动画来删除 div1 的显示。我怎么做？ index.html 代码在这里:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Swipe Slider animation</title>
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no">
<link href="style.css" rel="stylesheet" />
<link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div ng-controller="tabsSwipeCtrl as responsive">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="responsive.selectPage(0)" ng-class="{'active': responsive.ngIncludeSelected.index == 0}">First</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="responsive.selectPage(1)" ng-class="{'active': responsive.ngIncludeSelected.index == 1}">Second</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="responsive.selectPage(2)" ng-class="{'active': responsive.ngIncludeSelected.index == 2}">Third</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" ng-click="responsive.selectPage(3)" ng-class="{'active': responsive.ngIncludeSelected.index == 3}">Fourth</button>
</div>
</div>
<div class="ngIncludeRelative">
<div class="ngIncludeItem" ng-include="responsive.ngIncludeSelected.url" ng-class="{'moveToLeft' : responsive.moveToLeft}"></div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-touch.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
<script src="script.js"></script>
</body>
</html>
最佳答案
在 div 中你可以简单地使用 jquery animate 函数来完成
$(".btn-default").click(function(){
$("div2").animate({
left: '250px'
});
});
关于javascript - Angular 动画: Slider Effect，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47330093/