时间戳

首页 > 解决方案 > 角度向下和向上滑动动画

angular - 角度向下和向上滑动动画

问题描述

我尝试在 Angular 中制作一个简单的上下滑动动画，但我遇到了问题。

这是HTML：

<div class="container" style="width: 228px">
  <a href="#" (click)=onDropDown()>
    <h3>Label</h3>
  </a>
  <ul [@dropDown]="state" class="menu">
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
  </ul>
</div>
<hr [@slideUpDown]='state'>

和我的打字稿文件：

import { Component, OnInit, HostListener } from '@angular/core';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';


@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
  animations: [
    trigger('dropDown', [
      state('hide', style({
        display: 'none',
        opacity: 0
      })),
      state('show', style({
        display: 'block',
        opacity: 1
      })),
      transition('hide => show', animate('300ms ease-out')),
      transition('show => hide', animate('300ms ease-in'))
    ]),
    trigger('slideUpDown', [
      state('hide', style({
        transform: 'translateY(0)'
      })),
      state('show', style({
        transform: 'translateY(0)'
      })),
      transition('hide => show', animate('300ms ease-out')),
      transition('show => hide', animate('300ms ease-in'))
    ]),
  ]
})
export class FooterComponent implements OnInit {

  state = 'hide';

  constructor() {  }

  ngOnInit() {
  }

  onDropDown(){
    this.state == 'hide' ? this.state = 'show' : this.state = 'hide';
  }
}

我的表演方式对我来说还可以。问题是我想为水平线设置动画，但由于它仍然在一个位置，我无法使用 transform 属性对其进行动画处理。

我怎样才能让它上下滑动顺畅？

我应该在一个 div 中关闭它并为父 div 的高度设置动画吗？

谢谢！

标签： angular

解决方案

关注您的评论

当您以您的方式创建动画时，您声明状态：状态是......好吧，状态（duh），它将应用于给定条件下的元素。

所以当你写这个

state('hide', style({
  transform: 'translateY(0)'
}))

你的意思是

当我的变量等于时，我的组件不应在 Y 轴上平移hide

这意味着你可以这样写你的状态

  state('hide', style({
    transform: 'translateY(100vh)'
  })),
  state('show', style({
    transform: 'translateY(0)'
  })),

当被要求隐藏时元素将离开窗口，并在被要求显示时返回。

如果你已经有了转换的值，那么让 Angular 来处理它

  state('hide', style({
    transform: 'translateY(100vh)'
  })),
  state('show', style({
    transform: '*'
  })),

推荐阅读