[英]AngularJS - animate div using changing scope variable
I'm new to angular. 我很有棱角。 I want to animate a div body using ng-click on a ng-repeat element.
我想使用ng-click元素在ng-repeat元素上设置div主体的动画。 This is what I have tried so far.
这是我到目前为止所尝试的。
app.js app.js
var app = angular.module( 'app', [] );
app.controller('appController', function($scope) {
$scope.items = [
{"id": "id1", "name": "Name 1"},
{"id": "id2", "name": "Name 2"},
{"id": "id3", "name": "Name 3"}
];
$scope.selectedStyle = {"background-color": "blue", "color": "white"};
$scope.selectedItem = $scope.items[0];
$scope.selectItem = function(item) {
$scope.selectedItem = item;
}
});
app.html app.html
<div ng-app="app" ng-controller="appController">
<table class=table>
<tbody>
<tr ng-repeat="item in items" ng-click="selectItem(item)" ng-style="item.id === selectedItem.id && selectedStyle">
<td>
{{item.id}}
</td>
</tr>
</tbody>
</table>
<div class="item-body">
{{selectedItem.name}}
</div>
</div>
What I wanted to do is add a fade-in transition effect to item-body div as the changing item. 我想要做的是将item-body div的淡入过渡效果添加为更改项。 I searched the web, but I can't seem to find a solution.
我在网上搜索,但似乎无法找到解决方案。 Please help.
请帮忙。
JSFiddle - https://jsfiddle.net/lpsandaruwan/ot45qdno/14/ JSFiddle - https://jsfiddle.net/lpsandaruwan/ot45qdno/14/
You can do this by adding a class to the selected element using angular , and managing the transition using css transitions . 您可以通过使用angular向所选元素添加类,并使用css过渡管理过渡来完成此操作。
This way, there's no need for $scope.selectedStyle
. 这样,就不需要
$scope.selectedStyle
。 We'll manage that in css. 我们将在css中管理它。
selected
class to the clicked element. selected
类添加到单击的元素。 item
will handle the color changes for you (both for select and deselect). item
css转换将为您处理颜色更改(包括select和deselect)。 var app = angular.module('app', []); app.controller('appController', function($scope) { $scope.items = [{ "id": "id1", "name": "Name 1" }, { "id": "id2", "name": "Name 2" }, { "id": "id3", "name": "Name 3" }]; $scope.selectedItem = $scope.items[0]; $scope.selectItem = function(item) { $scope.selectedItem = item; } });
.item-body { color: red; } .item { cursor: pointer; transition: all 250ms linear; } .item.selected { cursor: default; background-color: blue; color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="appController"> <table class=table> <tbody> <tr ng-repeat="item in items" ng-click="selectItem(item)" class="item" ng-class="{ 'selected': selectedItem === item }"> <td> {{item.id}} </td> </tr> </tbody> </table> <div class="item-body"> {{selectedItem.name}} </div> </div>
item-body
item-body
if you want to animate the item-body
on change, you can use a simple timeout to add and remove a class. 如果要在更改时为
item-body
设置动画,可以使用简单的超时来添加和删除类。
Also, you should know that there are some modules that you can use to achieve this (like this ). 此外,您应该知道有一些模块可以用来实现这一点(像这样 )。
Here is what I suggest: 这是我的建议:
item-body
element know it needs to hide and show item-body
元素知道它需要隐藏和显示 transition
we did before transition
var app = angular.module('app', []); app.controller('appController', function($scope, $timeout) { $scope.items = [{ "id": "id1", "name": "Name 1" }, { "id": "id2", "name": "Name 2" }, { "id": "id3", "name": "Name 3" }]; $scope.selectedItem = $scope.items[0]; $scope.selectItem = function(item) { $scope.changeIsOn = true; $timeout(function() { $scope.selectedItem = item; $scope.changeIsOn = false; }, 250); } });
.item-body { color: red; transition: opacity 250ms linear; } .item-body.changing { opacity: 0; } .item { cursor: pointer; transition: all 250ms linear; } .item.selected { cursor: default; background-color: blue; color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="appController"> <table class=table> <tbody> <tr ng-repeat="item in items" ng-click="selectItem(item)" class="item" ng-class="{ 'selected': selectedItem === item }"> <td> {{item.id}} </td> </tr> </tbody> </table> <div class="item-body" ng-class="{ 'changing': changeIsOn }"> {{selectedItem.name}} </div> </div>
Using ng-class, you could apply the animation class selectively based on the scope value, eg: 使用ng-class,您可以根据范围值有选择地应用动画类,例如:
$scope.selectedStyle = false;
<tr ng-class="({'myClass':selectedStyle})" >
You can create a custom directive that watches a assigned model to your item-body div and when value is changed you can use animate service of angular. 您可以创建一个自定义指令,将指定的模型监视到item-body div,当值更改时,您可以使用angular的动画服务。
In your html view change notice that I have added my custom directive 在您的html视图更改通知中,我已添加了我的自定义指令
<div ng-app="app" ng-controller="appController">
<table class=table>
<tbody>
<tr ng-repeat="item in items" ng-click="selectItem(item)" ng-style="item.id === selectedItem.id && selectedStyle">
<td>
{{item.id}}
</td>
</tr>
</tbody>
</table>
<div class="item-body" my-dir ng-model="myValue">
{{selectedItem.name}}
</div>
</div>
Remember to download angular-animate.js and add it to your solution.Important part to inject a 'ngAnimate' dependency in your module and add your custom directive as follows. 记得下载angular-animate.js并将其添加到您的解决方案中。重要的部分是在模块中注入'ngAnimate'依赖项并添加您的自定义指令,如下所示。
Before doing this add a class style 在此之前添加一个类样式
.myClass
{
background-color: red;
transition: all 1s;
-webkit-transition: all 1s ease-in-out;
}
Notice that I am applying $watch method to monitor variable 请注意,我正在应用$ watch方法来监视变量
var app = angular.module('app', ['ngAnimate']);
app.controller('appController', function ($scope) {
$scope.items = [
{ "id": "id1", "name": "Name 1" },
{ "id": "id2", "name": "Name 2" },
{ "id": "id3", "name": "Name 3" }
];
$scope.selectedStyle = { "background-color": "blue", "color": "white" };
$scope.selectedItem = $scope.items[0];
$scope.selectItem = function (item) {
$scope.selectedItem = item;
$scope.myValue = item.name;
}
}).directive("myDir", function ($animate, $timeout) {
return function (scope, element, attrs) {
scope.$watch('myValue', function (newValue, oldValue) {
if (newValue != oldValue) {
$animate.addClass(element, "myClass").then(function () {
$timeout(function () { $animate.removeClass(element, "myClass"); });
});
}
},true);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.