角型アニメーション：スライダ効果

ここでコードを見てください：Simple Angular animation example 角型アニメーションを使用して私のWebページで同様の効果を生成したいと思います。唯一の違いは、上の例では、異なるhtmlファイルを取得するときにコードがスライダ効果を生成していることです。私のプロジェクトはそれにわずかな変更が加えられています。代わりに、私は同じhtmlファイルの2つの異なるdivを表示したい。ボタン1をクリックするとdivを表示したい。今はdiv1と呼ぶことができます。ボタン2をクリックすると、div2を表示し、スライドアニメーションを表示してdiv1の表示を削除します。それ、どうやったら出来るの？のindex.htmlコードはここにある：http://bl.ocks.org：uは単にjqueryのアニメーション機能を使用して行うことができますDIVの中角型アニメーション：スライダ効果

<!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>

出典

2017-11-16 user45437

-1

が

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

出典

2017-11-16 13:14:42 user3815413

がここにコードを見ていてください。/anonymoussc/4f30d2563f5524ff618d – user45437

別途htmlファイルは必要ありません。私は各htmlファイルの内容（firstSwipe、secondSwipe、.....）をindex.htmlファイルに入れたいだけです。ボタンをクリックするまで、displayプロパティがnoneに設定されているindex.htmlでdivをdivにします。ボタンをクリックすると、それぞれのdivがアニメーションに表示されます。その部分については、response.ngIncludeTemplatesのscript.jsファイルにいくつかの変更を加える必要があります – user45437

角型アニメーション：スライダ効果

答えて

関連する問題