时间戳

首页 > 解决方案 > Angular - 如何用正确的 Angular 代码替换这个 jQuery 状态变化？

jquery - Angular - 如何用正确的 Angular 代码替换这个 jQuery 状态变化？

问题描述

在一个组件中，我有一个触发 a 的主题，.next(value)它触发了这个 jQuery 逻辑：

  if (this.isOpen) {
    jQuery(`#preview-${this.index}`).
      stop().slideDown('fast');
  } else {
    jQuery(`#preview-${this.index}`).
      stop().css('display', 'block').slideUp('fast');
  };

你可以看到它以一个 id 为目标，所以我知道我必须用@ViewChild装饰器构造替换它。

如何将 @ViewChild 与 scss 关键帧结合使用来实现相同的功能，以便删除 JQuery。

因为这是一个非常简单的 CSS 过渡，所以我正在寻找一种方法来做到这一点，而不必使用角度动画库（当然，除非那是唯一的方法）。

请注意，我在这里发现了针对 AngularJS 提出并回答的相同问题，但不是 Angular（无论如何！）

标签： jqueryangularsasscss-animationskeyframe

解决方案

完成这项工作有几个问题：

  1. 请注意，最后代码正在应用“显示：无”来隐藏元素。jQuery 在动画结束后应用它。所以这里的问题是你不能为 display:none 设置动画（显然，因为那里什么都没有！）。这个问题帮助我理解了这一点。

  2. jQuery 向下滑动只是简单地为元素的高度设置动画，将其设置为 0。

因此，有了这些知识，它变得非常容易。首先用 css 类和动画设置两个状态：

.fb-card-open {
  display: block;
}
.fb-card-closed {
  display: block;
  overflow: hidden;
  animation: slideup;
  padding-top: 0;
  padding-bottom: 0;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
@keyframes slideup {
  0% { height:inherit; }
  100% { height:0; }
}

这意味着我们有 100% 的打开状态和关闭状态，这基本上将高度设置为 0 并删除顶部和底部的填充（因为动画元素内部有填充文本，所以即使高度为 0，您仍然会看到一些垂直空间）

然后使用 [ngClass] 指令在两个类之间切换：

[ngClass]="{'fb-card-open': isOpen, 'fb-card-closed' : !isOpen }"

感谢这篇文章，它帮助理解了如何做到这一点（这篇文章是关于 AngularJS，而不是 Angular，但原理与 [ngClass] 指令的行为方式相同）

注意 如果你设置 padding:0 而不仅仅是顶部和底部，你会为元素的子元素获得一个很酷的“飞入”效果，这是我通过这样做发现的一个不错的奖励！

推荐阅读