[英]CSS transition with expand/collapse in Angular
I have referred to other questions on SO related to expand/collapse, but the solutions are mostly based on setting height CSS property.我已经提到了其他与展开/折叠相关的 SO 问题,但解决方案主要基于设置高度 CSS 属性。 I have tried, but those solutions are not applicable to my use case.
我已经尝试过,但这些解决方案不适用于我的用例。
I have long string, if its length exceeds a limit I want to clip it by default and expand it by clicking on "Show more".我有长字符串,如果它的长度超过限制,我想默认剪切它并通过单击“显示更多”来扩展它。 On clicking "Show less", it should collapse the long string.
单击“少显示”时,它应该折叠长字符串。 I have implemented the functionality but the transition from collapsed to expanded does not have animation and looks jarring.
我已经实现了该功能,但是从折叠到展开的过渡没有 animation 并且看起来很刺耳。
I would like to know how the collapsed/expanded transitions could made nicer.我想知道折叠/展开的过渡如何变得更好。
Here's stackblitz reproduction of the same: https://stackblitz.com/edit/angular-ivy-exalqr?file=src/app/app-expand/app-expand.component.ts这是相同的stackblitz复制: https://stackblitz.com/edit/angular-ivy-exalqr?file=src/app/app-expand/app-expand.component.ts
Just use the below css, where you set the width to the number of characters you want to show.只需使用下面的 css,在其中将宽度设置为要显示的字符数。
html html
.cropper-wrapper {
width: 95px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
transition: all 1s ease-in-out;
}
.isCollapsed {
width: 100% !important;
display: inline-block;
}
css css
<span class="cropper-wrapper" [ngClass]="{ isCollapsed: !isCollapsed }"
>{{ str }}
</span>
<span (click)="toggle()">{{ isCollapsed ? 'Show More' : 'Show less' }}</span>
ts ts
import {
ChangeDetectionStrategy,
Component,
Input,
OnInit,
} from '@angular/core';
@Component({
selector: 'app-expand',
templateUrl: './app-expand.component.html',
styleUrls: ['./app-expand.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppExpandComponent implements OnInit {
isCollapsed = false;
@Input() str;
private _input: string = '';
private _originalInput: string = '';
constructor() {}
ngOnInit() {
this.toggle();
}
toggle() {
if (this.isCollapsed) {
this._input = this._originalInput;
} else {
if (this._originalInput.length > 10) {
this._input = this._originalInput.substring(0, 10) + '...';
}
}
this.isCollapsed = !this.isCollapsed;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.