divからdivへの移行

私のWebアプリケーションでアニメーションを作成する必要があります。クリックすると、1つのdivから別のdivにIDテーブルの列だけを移動し、別の列を非表示にする必要があります。しかし、アニメーションで。これに対してJSFIDDLEを作成しますが、移動する列ID（緑色のdivから）を赤色のdivに変更する方法はわかりません。 https://jsfiddle.net/q4eotzb0/6/divからdivへの移行

<body> 
<script type="text/javascript"> 
var app = angular.module('MyApp', []) 
app.controller('MyController', function($scope) { 
    //This will hide the DIV by default. 
    $scope.IsVisible = true; 
    $scope.ShowHide = function() { 
    //If DIV is visible it will be hidden and vice versa. 
    $scope.IsVisible = !$scope.IsVisible; 
    } 
});

<br /> 
<br /> 
<div class="meni col-lg-2 col-md-2 col-sm-12 col-xs-12"> 
<ul> 
    <li>home</li> 
    <li>home</li> 
    <li>home</li> 
    <li>home</li> 
    <li>home</li> 
</ul> 
</div > 
<div class="container-fluid col-lg-10 col-md-10 col-sm-12 col-xs-12"> 

<div class="test col-lg-4 col-md-4 col-sm-12 col-xs-12" ng-class="{'divOpen': IsVisible}"> 
<div ng-if="!IsVisible"> 
    ID<br> 
    50<br> 
    51<br> 
    52<br> 
</div> 
<div ng-if="IsVisible"> 
    MAPs 
</div> 
</div> 
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12"> 
<div class="testtest"> 
<input type="button" ng-if="!IsVisible" value="Back" ng-click="ShowHide()" /> 
    <table class="table" ng-if="IsVisible"> 
    <tr> 
    <td>ID</td> 
    <td>NAME</td> 
    <td>LOCATION</td> 
    <td>No</td> 
    </tr> 
    <tr> 
    <td>50</td> 
    <td>NAME</td> 
    <td>LOCATION</td> 
    <td> <input type="button" value="SHOW/HIDE" ng-click="ShowHide()" /></td> 
    </tr> 
    <tr> 
    <td>51</td> 
    <td>NAME</td> 
    <td>LOCATION</td> 
    <td> <input type="button" value="SHOW/HIDE" ng-click="ShowHide()" /></td> 
    </tr> 
    <tr> 
    <td>52</td> 
    <td>NAME</td> 
    <td>LOCATION</td> 
    INFO item 
    </table> 
</div> 
</div> 
</div>

.test { 
background: red; 
width: 50px; 
height: 350px; 
-webkit-transition: width 2s;-moz-transition: width 2s ease-in-out;-ms- 
transition: width 2s ease-in-out; 
-o-transition: width 2s ease-in-out;transition: width 2s; 
} 


.divOpen{ 
width: 100px; 
} 
.testtest{ 
background: green; 
height: 350px; 
width: auto; 
} 
.meni { 
background-color: grey; 
height: 350px; 
}

出典

2017-10-05 Arter

CSSトランジションは、[OK]を –

を助けにはなりません、あなたは提案で私を助けることができますか？ Thnx – Arter

これは角度ルータがために作られたまさにです！各ルートに新しいtemplateUrlを設定し、クリックやイベントで変更するだけです。

あなたは、ルータのルックスはここで見つけることができる方法の一例余分なスクリプト（https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.min.js）をリンクする必要があります：

https://www.w3schools.com/angular/angular_routing.aspを。

JSFIDDLE that explains ngRoute fairly well.

それからちょうど基本的に入ってくるHTMLオブジェクトへのCSSトランジションを追加：

<script type="text/ng-template" id="embedded.home.html"> 
    <h1 class="fade-in"> Home </h1> 
</script> 

<script type="text/ng-template" id="embedded.about.html"> 
    <h1 class="fade-in"> About </h1> 
</script>

出典

2017-10-05 08:05:33 Paul

私はあなたが私を理解していないと思う。私は私のアプリで状態を変更するためにuiルータを使用します。私の状態で私は2つのdivを持っている別のものがあります...そして、私はanimetedテーブルから2番目のdivに1つのテーブルの列を移動する必要があります。 – Arter

あなたは何をしようとしているのか理解していませんが、オブジェクトを「移動」したい場合はCSSを切り替えて、JS内の別のスレッドを使用して非表示にしてください。 – Paul

divからdivへの移行

答えて

関連する問題