Question

我有两个项目列表，我想在点击fa caret which belongs to it parent时为每个项目制作动画。

这里是html：

<li>
  <div>
    <span> something1</span>
    <i class="fa fa-angle-right" (click)="toggleList()"></i>
  </div>
 <ul [@elementState]="showlist">
   <li>something2</li>
   <li>something3</li>
 </ul>
</li>
<li>
  <div>
    <span>something4</span>
    <i class="fa fa-angle-right" (click)="toggleList()"></i>
  </div>
  <ul  [@elementState]="showlist">
      <li >something5</li>
      <li >something6</li>
    </ul>
</li>

这里是来自@component的ts：

   animations: [
    trigger('elementState', [
      state('show', style({
        'height':'88px'
      })),
      state('hide',   style({
        'hide':'0px'
      })),
      transition('show <=> hide', animate('300ms'))
    ])
  ]

以下是来自班级的一些ts：

showlist = 'hide';


  toggleList(){
       this.showlist = this.showlist === 'hide' ? 'show' : 'hide';
  }

我的目标是让这两个列表单独打开，因为目前每个图标点击触发两个列表的动画，这不是我想要发生的。

我想为每个制作单独的动画，但会有很多代码重复，所以如果可能的话我想避免这种情况。

有没有人知道让它运作的诀窍？

Answer 1

您对两个无序列表使用相同的变量，显然它们会同时触发。

而不是使用字符串变量＆＃39; show＆＃39;并且隐藏＆＃39;要触发动画，您可以使用布尔值并检查无序列表是否是您要设置动画的列表。你可以用你的想象力来思考你想要使用的任何东西，但我会给你一个简单的例子：

animations: [
    trigger('elementState', [
      state('1', style({
        'height':'88px'
      })),
      state('0',   style({
        'hide':'0px'
      })),
      transition('0 <=> 1', animate('300ms'))
    ])
  ]

<ul [@elementState]="showlist == 'list1'"> // or 'list2'

(click)="showlist = 'list1'" // or 'list2'

Answer 2

我假设您将在这里使用var settings = { async: true, crossDomain: true, crossOrigin: true, url: "http://35.230.52.177:8095/OneSoftTracking/rest/tracking/consignment/AE101632?hostname=aastha-enterprises.com", method: "GET", "headers": { "Content-Type":"application/json", "Access-Control-Allow-Origin":"*", 'Access-Control-Allow-Methods':'GET', 'Access-Control-Allow-Credentials' : true, "Accept": "*/*", "Cache-Control": "no-cache", "Postman-Token": "bea2b074-eefc-473e-84d7-b680a07ed7df,dafa4f5c-94af-4efe-967f-75a9fe185a1e", }, success: function(data) { console.log("+++++SuCCESS"); console.log(data); }, error: function(error){ console.log("NOT SUCCEED"); } } $.ajax(settings).done(function (response) { console.log(response); });，相应地写答案

*ngFor

在这里，我使用let （请参见<li *ngFor = "let something of something_list; let showlist = false"> <div> <span> something1</span> <i class="fa fa-angle-right" (click)="showlist = !showlist"></i> </div> <ul [@elementState]="showlist ? 'show' : 'hide'> <li>something2</li> <li>something3</li> </ul> </li>）为每个列表项声明了局部变量，默认情况下，其let showlist = false

点击将其切换到false （请参阅true/false）

最后，如果(click)="showlist = !showlist"为true，则会触发状态“显示”，否则将“隐藏”，这是您在动画中定义的状态 （请参见showlist）

Angular，如何触发多个动画中的一个

2 个答案: