angular - 带有 Angular-material 的 AnimationDuration 没有响应
问题描述
我正在使用 Angular5 项目我安装了 Angular-material 但 Angular-material 的 animationDuration 属性不起作用。我在下面粘贴了我的代码
我检查了角度动画,一切都很好
<mat-tab-group animationDuration="0ms">
<mat-tab label="Tab One">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</mat-tab>
<mat-tab label="Tab Two">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</mat-tab>
</mat-tab-group>
下面是 package.json 文件
"dependencies": {
"@angular/animations": "^4.0.1",
"@angular/cdk": "^5.2.5",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.5",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"bootstrap": "^4.0.0-alpha.6",
"chart.js": "^2.5.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"easy-pie-chart": "^2.1.7",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"rxjs": "^5.5.6",
"screenfull": "^3.2.0",
"web-animations-js": "^2.2.5",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.2",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
解决方案
经过一番研究,我发现了这个:[@.disabled]="true"
<mat-tab-group [@.disabled]="true">
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
这将禁用动画。
推荐阅读
- reactjs - 将 props 值传递给 this.state 但未定义?
- php - 如果外键表laravel中的单行状态不同,如何根据状态获取外键表数据
- json - 使用 React Native,如何将 fetch 的 responseJson 保存到前端的文件中
- javascript - 如何通过按周浏览对对象数组进行排序?
- sql - SQL:更改从 select 语句返回的表
- vb.net - 包含普通分数的数字的数值排序
- javascript - 如何使用 Intl.DateTimeFormat 格式化 JavaScript 日期对象
- c++ - c ++变量重新分配被代码忽略
- java - 它显示了我在 JPanel 上单击的 JButton 后面的其他组件的内容。怎么了?
- php - 如何从 mysql 中显示 select2 数组中的数据?