角度动画：滑块效果

Question

Have a look at the code here: Simple Angular animation example I want to generate a similar effect in in my webpage using Angular animation. 在这里查看代码：简单的Angular动画示例我想在我的网页中使用Angular动画生成类似的效果。 The only difference is, in the above example, the code is generating slider effect when fetching different html files. 唯一的不同是，在上面的示例中，代码在提取不同的html文件时生成滑块效果。 My project has a slight modification to that. 我的项目对此做了些微修改。 Instead, i want to display two different div of the same html file. 相反，我想显示同一HTML文件的两个不同的div。 On clicking button one I want to display a div. 在单击一个按钮时，我要显示一个div。 lets call it div1 for now. 现在将其称为div1。 On clicking button 2 I want to display div2 and remove display of div1 by showing sliding animation. 在单击按钮2时，我想显示div2并通过显示滑动动画来删除div1的显示。 How do I do that? 我怎么做？ The index.html code is here: 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

Within div u can simply do by using jquery animate function 在div中，您可以简单地通过使用jQuery animate函数来完成

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

角度动画：滑块效果

问题描述

1 个解决方案

解决方案1
-1 2017-11-16 13:14:42

角度动画：滑块效果

问题描述

1 个解决方案

解决方案1 -1 2017-11-16 13:14:42

解决方案1
-1 2017-11-16 13:14:42