Question

在这里查看代码：Simple Angular animation example 我想在我的网页中使用Angular动画生成类似的效果。唯一的区别是，在上面的例子中，代码在获取不同的html文件时生成滑块效果。我的项目略有修改。相反，我想显示相同的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>

Answer 1

在div中你可以简单地使用jquery animate函数

$(".btn-default").click(function(){
$("div2").animate({
    left: '250px'
});
});

角度动画：滑块效果

1 个答案: