从一个div转换到另一个div

我需要在我的web应用上制作动画。单击时，我需要将ID表列从一个div移动到另一个div，另一列需要隐藏。但与动画。我为此制作了JSFIDDLE，但是我无法确定如何为MOVING列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转换将不利于 –

好吧，你能帮助我的建议？ 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.

然后，只需在CSS过渡基本上添加到输入HTML对象：

<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路由器更改状态。还有一件事，在我的状态下，我有两个div ...而我需要动画只将一个表格列从表格移动到第二个div。 – Arter

我不明白你想做什么..但如果你只是想“移动”一个对象，css转换它，然后用JS中的单独线程隐藏它。 – Paul

从一个div转换到另一个div

回答

相关问题