ng-cw-v12
Version:
Angular UI component library
191 lines (186 loc) • 8.28 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class FlipTextComponent {
constructor(elementRef) {
this.elementRef = elementRef;
/** 展示的文本内容 */
this._text = '';
/** 每个字符动画持续时间 */
this.ncDuration = 500;
/** 每个字符之间的延迟 */
this.ncDelayMultiple = 80;
/** 每个字符之间的间距 */
this.ncGap = 0;
/** 延迟 */
this.ncDelay = 0;
/** 是否在视图可见时才开始动画 */
this._startOnView = false;
/** 是否只执行一次动画 */
this._once = false;
this.characters = [];
this.observer = null;
this.timeout = null;
}
set ncText(value) {
this._text = value;
setTimeout(() => {
this.start();
});
}
get ncText() {
return this._text;
}
set ncStartOnView(val) {
this._startOnView = val !== null && val !== undefined && val !== false && val !== 'false';
}
get ncStartOnView() {
return this._startOnView;
}
set ncOnce(val) {
this._once = val !== null && val !== undefined && val !== false && val !== 'false';
}
get ncOnce() {
return this._once;
}
ngOnInit() { }
ngOnDestroy() {
this.clear();
}
start() {
this.clear();
if (!this.ncStartOnView) {
this.processText();
this.timeout = setTimeout(() => {
this.startAnimation();
}, this.ncDelay);
}
else {
this.setupIntersectionObserver();
}
}
clear() {
if (this.observer) {
this.observer.disconnect();
}
if (this.timeout) {
clearTimeout(this.timeout);
}
}
setupIntersectionObserver() {
this.observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
this.processText();
this.timeout = setTimeout(() => {
this.startAnimation();
}, this.ncDelay);
if (this.ncOnce) {
if (this.observer) {
this.observer.disconnect();
}
}
}
else if (!this.ncOnce) {
this.endAnimation();
}
}, { threshold: 0.1 });
this.observer.observe(this.elementRef.nativeElement);
}
processText() {
this.characters = this.ncText.split('').map((char, i) => ({
char,
state: 'hidden',
delay: i * this.ncDelayMultiple
}));
}
startAnimation() {
this.characters.forEach(char => {
char.state = 'visible';
});
}
endAnimation() {
//若存在ncDelay，离开视图后，startAnimation可能还未执行，则需要清除timeout
if (this.timeout) {
clearTimeout(this.timeout);
}
//隐藏显示的文本
this.characters.forEach(char => {
char.state = 'hidden';
});
}
}
FlipTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: FlipTextComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
FlipTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: FlipTextComponent, selector: "nc-flip-text", inputs: { ncText: "ncText", ncDuration: "ncDuration", ncDelayMultiple: "ncDelayMultiple", ncGap: "ncGap", ncDelay: "ncDelay", ncStartOnView: "ncStartOnView", ncOnce: "ncOnce" }, ngImport: i0, template: "<div class=\"flip-text-container gap-x\" style=\"--gap: {{ncGap}}px;\">\r\n <ng-container *ngFor=\"let char of characters; let i = index\">\r\n <span [@flipState]=\"{value: char.state, params: {duration: ncDuration, delay: char.delay}}\"\r\n class=\"origin-center drop-shadow-sm flip-span\" [innerHTML]=\"char.char === ' ' ? ' ' : char.char\"></span>\r\n </ng-container>\r\n</div>", styles: [":host{display:block}.flip-text-container{width:-moz-fit-content;width:fit-content}.gap-x>*+*{margin-left:var(--gap)}.origin-center{transform-origin:center}.drop-shadow-sm{filter:drop-shadow(0 1px 1px rgba(0,0,0,.05))}.flip-span{display:inline-block;transform-origin:center center;perspective:1000px}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
trigger('flipState', [
state('hidden', style({
transform: 'rotateX(-90deg) scaleY(0)',
opacity: 0
})),
state('visible', style({
transform: 'rotateX(0) scaleY(1)',
opacity: 1
})),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms cubic-bezier(0.33, 1, 0.68, 1)')),
transition('visible => hidden', animate('{{duration}}ms'))
])
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: FlipTextComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-flip-text',
templateUrl: './flip-text.component.html',
styleUrls: ['./flip-text.component.less'],
animations: [
trigger('flipState', [
state('hidden', style({
transform: 'rotateX(-90deg) scaleY(0)',
opacity: 0
})),
state('visible', style({
transform: 'rotateX(0) scaleY(1)',
opacity: 1
})),
transition('hidden => visible', animate('{{duration}}ms {{delay}}ms cubic-bezier(0.33, 1, 0.68, 1)')),
transition('visible => hidden', animate('{{duration}}ms'))
])
]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ncText: [{
type: Input
}], ncDuration: [{
type: Input
}], ncDelayMultiple: [{
type: Input
}], ncGap: [{
type: Input
}], ncDelay: [{
type: Input
}], ncStartOnView: [{
type: Input
}], ncOnce: [{
type: Input
}] } });
class NcFlipTextModule {
}
NcFlipTextModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcFlipTextModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcFlipTextModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcFlipTextModule, declarations: [FlipTextComponent], imports: [CommonModule], exports: [FlipTextComponent] });
NcFlipTextModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcFlipTextModule, imports: [[CommonModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcFlipTextModule, decorators: [{
type: NgModule,
args: [{
declarations: [
FlipTextComponent
],
imports: [CommonModule],
exports: [
FlipTextComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { FlipTextComponent, NcFlipTextModule };
//# sourceMappingURL=ng-cw-v12-flip-text.js.map