gpt4 book ai didi

jquery - Angular 动画

转载 作者:行者123 更新时间:2023-12-03 22:44:31 25 4
gpt4 key购买 nike

目前我在 ng-click Controller 中有这行代码

$(".message").show(300).delay(900).hide(300);

虽然它工作得非常好,但我被告知我绝对不能在 Controller 内进行动画/jQuery/DOM 操作。有没有另一种方法可以做到这一点,而不涉及大量的困惑?

最佳答案

编写一个简单的指令来监视其属性:

app.directive('animateMe', function() {
return function(scope, element, attrs) {
scope.$watch(attrs.animateMe, function() {
element.show(300).delay(900).hide(300);
})
}
})

将该指令放在要设置动画的 HTML 元素上。让 ng-click 切换模型/范围属性。

<a ng-click="animateToggle = !animateToggle">animate</a>
<div animate-me="animateToggle">...</div>

更多代码,是的。但现在您有了可重用的东西(并且不需要选择器)。

Fiddle

在 fiddle 中,我将 ng-hide 添加到 div,以便它最初不会出现。

<小时/>

更新:
Angular 1.1.4 现在有 ngAnimate指示。虽然它不如编写自己的动画指令那么灵活,但它可以处理许多场景。 ng-show (和 ng-hide)指令支持 showhide animation methods .

关于jquery - Angular 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15228157/

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