gpt4 book ai didi

javascript - 如何根据 SELECT 更改淡出/淡入 View ?

转载 作者:行者123 更新时间:2023-11-29 14:47:39 24 4
gpt4 key购买 nike

如果我们不介意公然违反 MVC,这很容易做到,但由于我正在尝试学习使用 Angular,所以我一直在像这样无害的小事情上撕扯我的头发。

我想要的是 div#thisShouldFade在选择新事物时淡出,然后随着新数据淡入。

这是 html:

<body ng-app="MyApp">
<div ng-controller="MyController as myCtrl">

<select ng-model="myCtrl.currentThing" ng-options="object.name for object in myCtrl.things">
<option value="">--choose a thing--</option>
</select>

<div id="thisShouldFade">{{myCtrl.currentThing.data}}</div>

</div>
</body>

和javascript:

  angular.module("MyApp", [])

.controller("MyController", function(){
this.things = [
{ name: "Thing One", data: "This is the data for thing one" },
{ name: "Thing Two", data: "This is the data for thing two" },
{ name: "Thing Three", data: "This is the data for thing three" }
];

this.currentThing = null;
})

和笨蛋:

http://plnkr.co/edit/RMgEOd6nrT9lFQlslDR0?p=preview

我尝试了很多不同的方法,使用 ngAnimate 来设置带有 CSS 转换的类,但根本问题似乎是模型正在立即改变,因为它绑定(bind)到 SELECT。 .

有没有人有好的 Angular 差策略?我宁愿把 jQuery 放在一边。也就是说,这是一个显示所需效果的 jQuery 插件:

http://plnkr.co/edit/SIFZI95Xy5IzgOQN0qVU?p=preview

最佳答案

这是一种使用过渡延迟和 ng-repeat 获得所需效果的 hacky 方法。它有些不完美,因为从无选择到选择等于转换延迟的延迟:

angular.module("MyApp", ['ngAnimate'])

.controller("MyController", function() {
this.things = [{
name: "Thing One",
data: "This is the data for thing one"
}, {
name: "Thing Two",
data: "This is the data for thing two"
}, {
name: "Thing Three",
data: "This is the data for thing three"
}];

this.currentThing = [];
})
.animate {
position: absolute;
transition: all 0.5s;
}
.animate.ng-enter {
opacity: 0;
}
.animate.ng-enter-active {
opacity: 1.0;
transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
}
.animate.ng-leave {
opacity: 1.0;
}
.animate.ng-leave-active {
opacity: 0;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-animate.min.js"></script>

<body ng-app="MyApp">
<div ng-controller="MyController as myCtrl">
<select ng-model="myCtrl.currentThing[0]" ng-options="object.name for object in myCtrl.things">
<option value="">--choose a thing--</option>
</select>
<div ng-repeat="thing in myCtrl.currentThing" class="animate">{{thing.data}}</div>
</div>
</body>

关于javascript - 如何根据 SELECT 更改淡出/淡入 View ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30762689/

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