我试图动画我的页面,但有以下问题:
我的页面上有内容div,以及在内容上方打开另一个div的按钮.我希望那个div能够褪色并滑入,并且下方也可以向下滑动.我为上面的div创建了我想要的动画,点击时打开,但不明白如何处理内容div,示例代码如下:
<div class="wrapper">
<button (click)="animated = !animated"></button>
<div *ngIf="animated" [@slideInOutAnimation] class="animated-div">
THIS DIV IS ANIMATED</div>
<div class="content">THIS IS CONTENT DIV</div>
</div>
TYPESCRIPT:
animations: [
trigger('slideInOutAnimation', [
state('*', style({
})),
transition(':enter', [
style({
transform: 'translateY(-10%)',
opacity: 0
}),
animate('.5s ease-in-out', style({
transform: 'translateY(0)',
opacity: 1
}))
]),
transition(':leave', [
animate('.5s ease-in-out', style({
transform: 'translateY(-10%)',
opacity: 0
}))
])
])
]
我应该创建一些其他触发器来移动我的内容div与动画的内容吗？
滚动后我有问题修复标题,我尝试了很多东西,但无法让它工作.我检查了这个帖子,但它对我不起作用:Angular 4 @HostListener窗口滚动事件奇怪地在Firefox中不起作用.这是我的组件结构:
在滚动50px之后,内部步骤是我要修复的标题.内部布局是一些其他内容,如带有徽标背景的div(在步骤的内容之上).
这是我在Steps.ts中尝试的内容
@HostListener('window:scroll', [])
onWindowScroll() {
const number = window.scrollY;
if (number > 40) {
this.fixed = true;
} else if (this.fixed && number < 10) {
this.fixed = false;
}
}
但问题是滚动根本没有触发.我找到了 滚动记录事件的示例,但对我来说它不起作用(我尝试使用$ event).有人有解决方案吗？
我正在尝试在我的打字稿中使用 javascript 设置元素样式，但它不起作用。这就是我尝试做的：
const element = document.getElementsByClassName('current');
element.style.backgroundColor = "" + this.styles.style.mainIdentifyingColor;
但我收到错误：
HTMLCollectionOf 上不存在属性“style”。
我也尝试过 setAttribute 但同样的事情..
我试图找出徽标尺寸，因为不同的客户可以上传不同的徽标。HTML是这样的：
<img [src]="layoutResponseModel?.clientLogo" alt="">
如何在Angular 5中获取此图像的宽度和高度？找到了一些JS示例，但无法正常工作
我有一个表格，当我单击某行时，我想在其下方显示另一行（包含有关该行的一些信息）。我不知道如何使其能够切换它，而且还能够打开多个子行。不知何故，我需要启用基于行 ID 的切换，这是我想到的，但它并没有真正像我需要的那样工作。
<ng-container *ngFor=" let fields of mf.data; let i = index">
<tr>
<td (click)="expandCompareRow(i)">Something</td>
<td>Something</td>
</tr>
<tr *ngIf="compareRowExpanded == i && expandedRow">
<td>Something</td>
<td>Something</td>
</tr>
</ng-container>
TS:
expandCompareRow(index) {
this.compareRowExpanded = index;
this.expandedRow = !this.expandedRow;
}
这会打开一行，但是当我想打开另一行时，它首先关闭已打开的行，然后我必须再次单击才能打开该行。
我正在尝试将jquery-ui添加到我在Angular 5中的项目,因为我必须使用jquery-ui创建一个功能,但我无法让它工作.我收到错误:
TypeError:WEBPACK_IMPORTED_MODULE_10_jquery(...).droppable不是函数
我尝试将jquery-ui脚本放到我的assets文件夹中并将其加载到index.html中,但这不起作用,因为它在jquery之前加载.现在我使用此代码将其添加到我使用它的组件中,并在jquery之后添加它但仍然得到上面的错误:
if (!document.querySelector('script[src="./assets/js/jquery-ui.min.js"]')) {
const s = document.createElement('script');
s.type = 'text/javascript';
s.src = './assets/js/jquery-ui.min.js';
document.head.appendChild(s);
}
当我运行npm install jquery-ui并将脚本添加到angular-cli.json时,会发生同样的错误......不知道还有什么可以尝试...
编辑:这个答案最终对我有用:Angular4找不到Jquery-UI函数