Я создаю веб-сайт на Angular и использую пакет https://micku7zu.github.io/vanilla-tilt.js/, и он отлично работает на настольном компьютере, но я не могу заставить его работать на мобильном телефоне!
Я тестировал его на Android и iPhone, и оба не работали с моим кодом.Однако я также попробовал ссылку выше на обоих мобильных устройствах, и, к моему удивлению, она тоже отлично работала.
Это необходимый (лишенный импорт и другие методы) код из компонента:
declare var require: any;
const VanillaTilt = require('vanilla-tilt');
export class ProjectCardComponent implements OnInit {
ngOnInit() {
VanillaTilt.init(document.querySelectorAll('.card'), {
max: 15,
speed: 400
});
}
}
И я использую его в этом компоненте HTML:
<div class="card" data-tilt data-tilt-glare [ngStyle]="{background: 'url(' + backgroundImage + ')'}">
<div class="card__inner">
<img src="../../assets/imgs/test_logo.png" alt="" srcset="">
</div>
</div>
Для ясности в отношении версий, это мой пакет. Json
{
"dependencies": {
"@angular/animations": "~8.1.0",
"@angular/common": "~8.1.0",
"@angular/compiler": "~8.1.0",
"@angular/core": "~8.1.0",
"@angular/forms": "~8.1.0",
"@angular/platform-browser": "~8.1.0",
"@angular/platform-browser-dynamic": "~8.1.0",
"@angular/router": "~8.1.0",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"vanilla-tilt": "^1.7.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.801.0",
"@angular/cli": "~8.1.0",
"@angular/compiler-cli": "~8.1.0",
"@angular/language-service": "~8.1.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^8.10.54",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
}
}
Я ожидал, что он будет работать на мобильных устройствах.так же, как это будет работать на рабочем столе, так же, как это работает на веб-сайте пакета.Я знаю, что есть разница между интерактивностью между мобильным и настольным компьютерами, поскольку рабочий стол реагирует в зависимости от положения мыши и мобильного устройства в зависимости от наклона устройства ... но последнее не работает в моем проекте, пока оно работаетработа на сайте!