Невозможно заставить VanillaTilt работать на мобильном телефоне с Angular 8 - PullRequest
0 голосов
/ 26 сентября 2019

Я создаю веб-сайт на 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"
  }
}

Я ожидал, что он будет работать на мобильных устройствах.так же, как это будет работать на рабочем столе, так же, как это работает на веб-сайте пакета.Я знаю, что есть разница между интерактивностью между мобильным и настольным компьютерами, поскольку рабочий стол реагирует в зависимости от положения мыши и мобильного устройства в зависимости от наклона устройства ... но последнее не работает в моем проекте, пока оно работаетработа на сайте!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...