Question

我尝试在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'>

和我的TypeScript文件：

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的高度设置动画吗？

谢谢！

Answer 1

发表评论

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

所以当你写这个

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

你的意思是

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

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

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

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

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

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

角度向下滑动动画

1 个答案: