角度動畫：滑塊效果

Question

在這里查看代碼：簡單的Angular動畫示例我想在我的網頁中使用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 個解決方案

解決方案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