Angular2 中的 jQuery .slideUp() 和 .slideDown() 等效项

Posted 2023-03-13

【中文标题】Angular2 中的 jQuery .slideUp() 和 .slideDown() 等效项

【英文标题】：jQuery .slideUp() and .slideDown() equivalent in Angular2

【发布时间】：2018-01-14 07:49:29

【问题描述】：

您能否指导我如何在 Angular2 中创建与 jQuery .slideUp() 和 .slideDown() 等效的自定义动画。我知道我可以为此使用 jQuery 插件，但很多人建议不要使用它。所以我正在寻找一种替代方法来创建这些动画。 slideUp 和 slideDown 将使任何 div 可折叠，并在单击某个按钮时具有流畅的动画效果。

【问题讨论】：

提示。更新元素的max-height 和overflow 属性

***.com/questions/37844791/… 试试这个

不清楚具体要求是什么？你想达到什么目的？是否只要求使用angular？

是的，Angular 提供了动画库。我只想使用这些库并制作动画！

【参考方案1】：

你可以使用Element.animate()

div > div 
  width: 300px;
  height: 200px;
  display: block;
  background: blue;

<div>
click
<div></div>
</div>
<script>
  const div = document.querySelector("div");
  const props = ["200px", "0px"]; // from, to
  div.onclick = () => 
    div.firstElementChild.animate(
      height: props
    , 
      duration: 1000,
      easing: "ease-in-out",
      iterations: 1,
      fill:"forwards"
    )
    .onfinish = function() 
      props.reverse()
    
  
</script>

【讨论】：

当你点击多次看起来很奇怪......这是否提供某种.stop()？

@RokoC.Buljan No. jQuery 不是必需的。可以调整设置。 OP 并没有要求立即完美。该代码不使用 Angular。 Answer处的代码使用DOM方法Element.animate()

他为什么会，对 ;) 另外，浏览器对上述内容的支持是什么？

我的意思是 1. 你可以 edit 添加更多详细信息 2. 你在建议一个糟糕的可用功能 3. 没有动画队列建立清除 4. 防止指针似乎是一个交易破坏者. 5. 在这种情况下，我宁愿建议一个复选框和 CSS3 max-height

@guest271314 老兄放松一下，我会赞成它来平衡。现在只需等待正确答案。不必惊慌。

【参考方案2】：

为了为元素创建自定义的上滑/下滑，我们可以执行以下操作：

1) 根据height 的样式定义两种状态（打开、关闭）。您还可以添加其他样式，例如 opacity 或 color。

我们使用特殊值 * 告诉 Angular 在执行期间使用该值。这将包括边距和填充。

2) 添加一个过渡来告诉 Angular 它应该如何从一种状态转到另一种状态。这将定义如何计算中间值（补间）。语法遵循total duration [delay] [easing function]。时间可以用秒或毫秒表示。例如：.2s, 200ms。省略时的默认缓动函数为ease。

见下文：

@Component(
  selector: 'my-app',
  template: `
    <h1>App</h1>
    <button (click)="toggle()">Toggle</button>
    <div class="card" [@toggle]="state">
      Click to slideUp/Down
    </div>
  `,
  animations: [
    trigger('toggle', [
      state('open', style( height: '200px' )),
      state('closed', style( height: '*' )),
      transition('open <=> closed', animate('200ms ease-in-out'))
    ])
  ],
)
export class App 
  state = "open";
  toggle() 
    this.state = (this.state=="open")? "closed": "open";
  

Plunker

【参考方案3】：

纯 CSS 方法：

html

<button (click)="toggleSlide=!toggleSlide">Toggle</button>
<div class="slider closed" [ngClass]="'closed':!toggleSlide">
  <div class="content"></div>
</div>

css

.slider 
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(1,0,1,0);


.slider.closed 
  max-height: 0;
  transition: max-height 0.7s cubic-bezier(0,1,0,1);


.content
  height: 200px;
  width: 200px;
  background-color: blue;

Plunker 示例here

【参考方案4】：

下面是使用动态高度值向下和向上滑动的动画。

如果对象上没有边距和/或内边距，您可以删除这些设置。

animations: [
  trigger('slideUpDown', [
    transition('void => *', [
      style(height: 0, margin: 0, padding: 0, opacity: 0),
      animate(500, style(height: '*', margin: '*', padding: '*', opacity: 1))
    ]),
    transition('* => void', [
      style(height: '*', margin: '*', padding: '*', opacity: 1),
      animate(500, style(height: 0, margin: 0, padding: 0, opacity: 0))
    ])
  ])
] 

【讨论】：

这是上滑/下滑最简单的答案之一。重要的是要考虑边距和填充，以避免在开始或结束时跳跃。这也适用于 *ngIf，因此您无需在动画上设置任何状态。

我会扩展您需要导入触发器，从“@angular/animations”过渡到也将其拉入。