JQuery 动画在 Angular 5 应用程序中不起作用答案

【问题标题】：JQuery animation in not working in angular 5 appJQuery 动画在 Angular 5 应用程序中不起作用
【发布时间】：2019-10-14 17:25:22
【问题描述】：

我找到了this 示例，说明如何使用 Angular 5 和 .netcore 2.0 创建固定的可折叠页脚。我正在尝试在 Angular 5 应用程序中使用该示例，但没有播放动画，也没有为 $('#collapseOne').on 调用警报，但是测试按钮将成功消息提示为快速测试以查看 jQuery 是否设置正确。

打字稿：

ngOnInit(): void {
    $(document).ready(function () {

        $('#test').click('click', function (e) {
        alert('success');
    });
    $('#collapseOne').on('show.bs.collapse', function () {
        alert('success')
        $('.panel-heading').animate({

          backgroundColor: "#515151"
      }, 500);
    })

    $('#collapseOne').on('hide.bs.collapse', function () {
        alert('success')
        $('.panel-heading').animate({
          backgroundColor: "#00B4FF"
      }, 500);
    })
  });
}

HTML：

<div id="test">test</div>
<div class="col-sm-3 sidenav">
  <app-nav-menu></app-nav-menu>
</div>
<div class="col-sm-9">
  <router-outlet> </router-outlet>
</div>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" [routerLink]="[{ outlets: { primary: ['operatorControl'],sidebar: ['List'] } }]">
          Click Me
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, adipisci, quibusdam, minima ratione voluptas quidem porro sint nobis odio cupiditate alias nisi. Magnam et fugiat labore eum at adipisci ex.
      </div>
    </div>
  </div>
</div>

【问题讨论】：

如果您创建 Angular 应用程序，为什么不使用 Angular 动画？
我猜 Angular 动画使用 css 动画，它比 jQuery 快很多。如果您出于某种原因在 jQuery 中需要动画，请查看 jQuery transit。很棒的小工具。
谢谢，伙计们，我将使用不需要使用 jquery 的角度动画。我正在寻找一个可折叠的固定页脚，这就是我遇到的例子。

标签： javascript jquery html angular

【解决方案1】：

如果您使用 angular-cli 应用程序，请按照以下步骤操作：

使用 npm 安装 jQuery

npm install jquery — 保存

转到 Angular CLI 项目文件夹根目录下的 ./angular-cli.json 文件，找到 scripts: [] 属性，并包含 jQuery 的路径

“脚本”：[“../node_modules/jquery/dist/jquery.min.js”]

现在要使用jQuery，只需在要使用jQuery的组件中按如下方式导入即可

从 'jquery' 导入 *；

或者

声明 var $: any;

【讨论】：

我已经完成了所有这些步骤。但我会按照他们在上面 cmets 中的建议做。 $('#test') 有效，所以我不知道为什么 `$('#collapseOne')` 不起作用。
在我看来，简单的 jQuery 动画应该可以工作。必须失败的是引导动画事件。你能确认引导动画在上面的例子中起作用吗？

【解决方案2】：

安装jquery

npm install --save jquery

在 angular.json 中设置这些：

"options": {
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js"
        ]
      },

在您的 .ts 文件中：

import * as $ from 'jquery';

在您的 app.module.ts 文件中：

window["$"] = $;
window["jQuery"] = $;

【讨论】：