从一个div转换到另一个div(Transition from one div to another div)

我需要在我的网络应用上制作动画。点击后，我只需要将ID表列从一个div移动到另一个div，另一列需要隐藏。但是有动画。我为此制作了JSFIDDLE，但我无法想象如何为MOVING列ID（从绿色div）到红色div做动画。 https://jsfiddle.net/q4eotzb0/6/

<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; }

I need to make animation on my web app. On click, I need to move only ID table column from one div to another div, another column needs to hide. But with animation. I make JSFIDDLE for this, but I can't figure how to do animation for MOVING column ID (from green div) to red div. https://jsfiddle.net/q4eotzb0/6/

<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; }

最满意答案

这正是Angular路由器的制作！您可以为每个路由设置一个新的templateUrl，只需在单击或事件上更改它。

您需要链接一个额外的脚本（ https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.min.js ），这里可以找到路由器外观的示例：

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

JSFIDDLE可以很好地解释ngRoute。

然后基本上将css转换添加到传入的html对象：

This is exactly what the Angular router was made for! You can set a new templateUrl for each route and just have it change on a click, or event.

You will need to link an extra script (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.min.js), an example of how the router looks can be found here:

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

JSFIDDLE that explains ngRoute fairly well.

Then just basically add the css transition to the incoming html object:

更多推荐