gpt4 book ai didi

javascript - AngularJS - 使用改变范围变量的动画 div

转载 作者:太空狗 更新时间:2023-10-29 15:39:57 25 4
gpt4 key购买 nike

我是 Angular 的新手。我想在 ng-repeat 元素上使用 ng-click 为 div 主体设置动画。到目前为止,这是我尝试过的。

应用程序.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;
}

});

应用.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>

我想做的是将淡入过渡效果添加到元素主体 div 作为变化的元素。我在网上搜索过,但似乎找不到解决方案。请帮忙。

JSFiddle - https://jsfiddle.net/lpsandaruwan/ot45qdno/14/

最佳答案

动画元素本身

您可以通过使用 angular 向所选元素添加一个类,并使用 css transitions 管理转换来实现这一点。

这样,就不需要$scope.selectedStyle了。我们将在 CSS 中进行管理。

所以,流程是这样的:

  1. 当用户点击时,angular 会向被点击的元素添加一个selected 类。
  2. item 类的
  3. css transition 将为您处理颜色变化(包括选择和取消选择)。

代码如下:

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 设置动画,您可以使用简单的超时来添加和删除类。

此外,您应该知道可以使用一些模块来实现此目的(例如 this )。

这是我的建议:

  1. 添加一个标志让 item-body 元素知道它需要隐藏和显示
  2. 将该标志挂接到一个类
  3. 让那个标志隐藏和显示元素,类似于我们之前做的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>

关于javascript - AngularJS - 使用改变范围变量的动画 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40970174/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com