gpt4 book ai didi

javascript - 在 ng-hide CSS 转换完成之前不要 ng-show 元素吗?

转载 作者:IT王子 更新时间:2023-10-29 03:16:06 24 4
gpt4 key购买 nike

简单的问题,但我遇到了实现问题。如果我有以下 DOM 设置:

<h1 class="fade" ng-repeat="child in parent.children" ng-show="parent.activeChild== child ">@{{ child.title }}</h1>

parent 模型的 activeChild 属性改变时,如何在模型改变 之前淡出当前事件的子节点,以及然后淡出新激活的子元素 post-change

我已经粗略地使用了它,只使用了 CSS 转换:

.fade.ng-hide-add {
transition:opacity 1s ease;
}

.fade.ng-hide-remove {
transition:opacity 1s ease 1s;
}

.fade.ng-hide-add {
opacity:1;

&.ng-hide-add-active {
opacity:0;
}
}

.fade.ng-hide-remove {
opacity:0;

&.ng-hide-remove-active {
opacity:1;
}
}

但是,这最终会产生 this problem (Plunkr) :

Gif

本质上,我想链接我的动画。我试过阅读 ng-animate docs , 但我在提供我想要的效果所需的语法方面遇到了麻烦。

我看到 Angular 文档有这样的内容:

app.animation('.fade', [function() {
return {
addClass: function(element, className, doneFn) {
},
removeClass: function(element, className, doneFn) {
}
};
}]);
  • 什么是className?这是我想在淡入/淡出时申请的类(class)吗?我期待的类(class)?
  • doneFn 是什么意思?我假设这是一个在动画完成后运行的函数?里面有什么?
  • 如果我已经有一个 doneFn,我应该在 addClassremoveClass 函数中做什么?

目标

我想直接使用 Angular 的 ngAnimate 模块通过 CSS 或 JS 生成工作动画。我怎样才能做到这一点?

最佳答案

为什么要使用单独的<h1>对于每个标题。您可以使用单个 <h1>标记以显示您的标题。

我已经为您的问题创建了一个演示,并且已成功完成您的要求。

已更新

请注意,代码被编辑为使用 ngAnimate模块。当您使用 ngAnimate模块,它将创建一个类 .ng-hide当你隐藏一个元素时,

这是您应用的 Controller ,

app2.controller("testController", ["$scope", "$timeout", function ($scope, $timeout) {

$scope.heading = {};
$scope.heading.show = true;

$scope.parent = {};
$scope.parent.children = ["A", "B", "C", "D"];
$scope.parent.activeChild = "A";

$scope.changeHeading = function (child) {
$timeout(function () {
$scope.parent.activeChild = child;
$scope.heading.show = true;
}, 1000);

}
}]);

你的 html 页面应该是这样的,

<div ng-controller="testController">
<h1 class="myAnimateClass" ng-show="heading.show" ng-class="{fadeIn : heading.fadeInModel==true, fadeOut : heading.fadeOutModel}"> {{parent.activeChild}} </h1>
<p ng-repeat="child in parent.children" ng-click="heading.show = false;changeHeading(child)">{{child}}</p>
</div>

并且我已经使用CSS3实现了淡入淡出动画,

.myAnimateClass {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity:1;
}

.myAnimateClass.ng-hide {
opacity: 0;
}

解释

为了达到你的要求,我使用了ng-class$timeout在 angularJS 中。

你看,我只有一个<h1>标记以显示您的标题。当我更改标题时,我只是更改它的绑定(bind)属性 $scope.parent.activeChild .

而且我使用了两个作用域变量 $scope.heading.fadeOutModel$scope.heading.fadeInModel添加和删​​除类 fadeInfadeOut动态地。

当用户点击更改标题时,我添加了类 fadeOut到你的航向。因此,这将显示淡出动画。而且我还在 app.js 中触发了一个函数,changeHeading() .

你可以看到,我强制 Angular 等待1000完成淡出动画的毫秒数。这段时间之后,它会将所选标题替换为新标题并添加一个类 fadeIn .因此,它将开始淡入动画。

希望这对你有帮助!!!

关于javascript - 在 ng-hide CSS 转换完成之前不要 ng-show 元素吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33336249/

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