Question

大家好，我在ionic 4上工作时遇到的问题是在'webKitTransition'中实现视差时。我找不到这个问题的解决方案。所以，请告诉我。感谢您的时间。错误在下面给出

ParallaxHideHeaderPage.html：7错误TypeError：无法设置未定义的属性'webkitTransition' 在EmulatedEncapsulationDomRenderer2.push ../ node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setStyle（platform-browser.js：1118）在BaseAnimationRenderer.push ../ node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.setStyle（animations.js：242）

import { Directive, AfterViewInit, ElementRef, Renderer, Input } from '@angular/core';

@Directive({
selector: '[appHideHeader]',
host: {
'(ionScroll)': 'onContentScroll($event)'
}
})
export class HideHeaderDirective {
@Input('header') header: HTMLElement;
headerHeight;
scrollContent;

constructor(private element: ElementRef, private renderer: Renderer) { 
console.log(this.header);
}

ngOnInit() {
this.headerHeight = this.header.clientHeight;
this.renderer.setElementStyle(this.header, 'webkitTransition', 'top 700ms');
this.scrollContent = this.element.nativeElement.getElementsByClassName("scroll-content")[0];
this.renderer.setElementStyle(this.scrollContent, 'webkitTransition', 'margin-top 700ms');

}

onContentScroll(event) {
if (event.detail.scrollTop >= 56) {
this.renderer.setElementStyle(this.header, 'top', '-56px');
this.renderer.setElementStyle(this.scrollContent, "margin-top", "0px")

}
else{
this.renderer.setElementStyle(this.header, 'top', '0px');
this.renderer.setElementStyle(this.scrollContent, "margin-top", "56px")

}
}
}

<ion-header #head>
  <ion-toolbar>
    <ion-title>parallaxHideHeader</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding appHideHeader [header]="head">
	<div class="main-content">
    <h2>Parallax Header</h2>
</div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</ion-content>

Answer 1

确保沿元素树访问正确的元素。代替

this.renderer.setElementStyle(this.header, 'webkitTransition', 'top 700ms');

使用

this.renderer.setElementStyle(this.header['el'], 'webkitTransition', 'top 700ms');

与“ this.scrollContent”相同。

无法设置未定义的属性“ webkitTransition”？

1 个答案: