1

我正在尝试使用角度动画构建滑入滑出类型的滑块，但我面临一些问题，例如......

  • 它正在脱离分裂（我知道这是因为我使用了 translateY(-100%)，但是还有什么替代方法？）
  • 当一次显示两个 div 时，它会增加 div 的大小。

这是我的 HTML 代码。

<div class="col-lg-2 col-md-2 col-sm-2" (click)='setEnable()'>
                                <div [class] = "disc ? 'text-minus' : ''"><span class="pull-right cursor_pointer settings_plus_minus font-bold font_size_20 ticket_panel_text_color">{{set ? '-' : '+'}}</span></div>
</div>


<div class="panel-body settings_one_line_description" *ngIf='!set' [@plusClick]='set'>
                        <span class="one_line_description_text_color">Access to networking platform, Uploading database of the ticket type, Status  </span>
</div>

<div class="panel-body" *ngIf = 'set' [@plusClick]='set'>
                    blah blah blah...
</div>

这是我的应用程序组件...

import { Component,
  Input,
  trigger,
  state,
  style,
  transition,
  animate } from '@angular/core';

@Component({

  selector: 'my-app',
  templateUrl:'app/tickets.html',
  animations: [
    trigger(
      'plusClick', [
      	//transition('* <=> *', animate('200ms ease-out'))
  		// transition('inactive => active', animate('1000ms ease-in')),
		// transition('active => inactive', animate('1000ms ease-out'))
        transition(':enter', [
          style({transform: 'translateY(-100%)', opacity: 0}),
          animate('2000ms ease-in', style({transform: 'translateY(0%)', opacity: 1}))
        ]),
        transition(':leave', [
          style({transform: 'translateY(0%)', 'opacity': 1}),
          animate('2000ms ease-out', style({transform: 'translateY(-100%)', opacity: 0})
        )])
      ]
    )
  ],
  
})

提前致谢。:)

4

0 回答 0