使用 Angular 4/6 动画在 Mouseover 上滚动 div答案

【问题标题】：Scroll div on Mouseover with Angular 4/6 Animation使用 Angular 4/6 动画在 Mouseover 上滚动 div
【发布时间】：2019-01-06 09:51:52
【问题描述】：

寻找 Angular 动画以在鼠标悬停时滚动 div 顶部和底部，在 mouseout 时我们应该清除滚动。

完全相似的动画类型。

http://www.solucior.com/13-Scroll_div_with_javascript.html

function scrollDiv(divId, depl) {
   var scroll_container = document.getElementById(divId);
   scroll_container.scrollTop -= depl;
   timer1 = setTimeout('scrollDiv("'+divId+'", '+depl+')', 30);
}

这是 Java 脚本代码。但我正在寻找 Angular 代码。

【问题讨论】：

标签： angular

【解决方案1】：

其中一些步骤是非常基本的 Angular。如果您表明自己付出了一些努力来自己寻找解决方案，我相信社区会很感激。具体来说，第 1 部分和第 3 部分非常基础。我会给你怀疑的好处，并假设你付出了努力并且仍然被难住了:-)

您将使用(mouseover)= 和(mouseout)= 而不是onmouseover= 和onmouseout=，在= 之后放置组件类中的函数。了解更多关于event binding
在 Angular 中，您可以使用模板引用变量，而不是传递 ID。在要引用的元素标记中，添加#someElementName，然后在鼠标事件上调用该函数时，传递someElementName。了解更多关于template reference variables
timer1 将成为组件的类成员 (this.timer1 = setTimout...)。了解更多关于component basics

a stackblitz 与结果

【讨论】：