Question

我有一个用Angular编写的应用程序。这是模板和TS文件的代码：

HTML：

<button class="btn btn-primay" (click)="changeColumnsSize()"> change column sizes</button>
  <div class="row">
    <div id="leftColumn" class="col-sm-{{leftColumnSize}}" style="background-color:lavender;">
      .col-sm-8     
    </div>
    <div id ="rightColumn" *ngIf="this.state===true" class="col-sm-{{rightColumnSize}}" style="background-color:lavenderblush;">
      .col-sm-4
    </div>
  </div>

TS：

import { Component } from '@angular/core';

@Component({
  selector: 'app-box',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.css']
})
export class BoxComponent {

  leftColumnSize: number = 8;
  rightColumnSize: number = 4;
  colDifference: number = 2;
  state: boolean = false;

  constructor() { }

  changeColumnsSize(){
    if (this.state===false)
      this.state = true;
    else
      this.state = false;

    if(this.state===true) {
      this.leftColumnSize-=this.colDifference;
      this.rightColumnSize+=this.colDifference;
    }
    else if (this.state===false) {
      this.leftColumnSize+=this.colDifference;
      this.rightColumnSize-=this.colDifference;
    }
  }
}

通过单击按钮，leftColumnSize的大小减小到8，rightColumn的大小变为4。通过再次单击它，leftColumnSize重置和rightColumn被删除。但是我希望这能以一种平滑的方式发生，例如过渡或动画。您能帮我编写相关的CSS代码吗？

Answer 1

您可以使用CSS过渡属性：

例如：

var newDocc = Drive.Files.copy(newFile, learnerDoc.getId(), options);

您还可以通过为动画元素创建通用.transition类来对其进行优化。

.col-sm-8 {
  width: 60%;
  transition: width .5s ease;
}

.col-sm-4 {
  width: 40%;
  transition: width .5s ease;
}

.col-sm-2 {
  width: 20%;
  transition: width .5s ease;
}

Answer 2

在@Component元数据中定义了角度动画，如下所示：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  animations: [
    // animation definitions here
  ]
})

然后，您需要定义触发器，这些触发器将添加到要设置动画的html元素中。例如：

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

然后使用[@triggerName]语法将这些动画附加到html元素，如下所示：

<ul>
  <li *ngFor="let hero of heroes"
        [@heroState]="hero.state"
        (click)="hero.toggleState()">
      {{hero.name}}
  </li>
</ul>

您应该在此处阅读Angular动画：

https://angular.io/guide/animations

此信息应使您朝正确的方向前进。我会花时间写出您的确切答案，但是您知道的话是，给一个人一条鱼，他一天不会饿，教他如何钓鱼，他终生不会饿。

祝你好运！

学习愉快！

平稳过渡

2 个答案: