Question

我需要在我的网络应用上制作动画。点击后，我只需要将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;
 }

Answer 1

这正是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 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>

从一个div转换到另一个div

1 个答案: