CSS проблема поворота обнаружена при выполнении его в ребре - PullRequest
Новая
       5

CSS проблема поворота обнаружена при выполнении его в ребре

0 голосов
/ 22 января 2020

Я написал несколько фрагментов кода в angular о вращении иконки, нажав кнопку переключения в angular. Когда я запускаю его в chrome, все в порядке, но в процессе ротации Edge работает нормально, но окончательное состояние поворота составляет 180 градусов назад.

Вот мои отрывки:

мой .ts файл: 

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-menutest',
  templateUrl: './menutest.component.html',
  styleUrls: ['./menutest.component.scss']
})
export class MenutestComponent implements OnInit {
  public classChangesRotation: {[key: string]: string} = {};
  public expandeds: {[key: string]: boolean} = {};
  private zero: string;

  constructor() {
    this.zero = 'zero';
    this.expandeds[this.zero] = true;
    this.classChangesRotation[this.zero] = 'rotate-expanded';
  }

  expansion_click(divName: string) {
    this.expandeds[divName] = !this.expandeds[divName];
    if (this.expandeds[divName]) {
      this.classChangesRotation[divName] = 'rotate-expanded';
    } else {
      this.classChangesRotation[divName] = 'rotate-collapsed';
    }
  }
}

мой html файл: 

<button mat-raised-button (click)="expansion_click('zero')">
  Expand and Collapse
  <mat-icon [ngClass]="classChangesRotation['zero']">
    chevron_left
  </mat-icon>
</button>

, а мой scss файл содержит: 

.rotate-expanded {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transition: -webkit-transform 150ms;
    transition: transform 150ms;
    transition: transform 150ms,-webkit-transform 150ms;
    transition-timing-function: ease-in-out;
}

.rotate-collapsed {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    transition: -webkit-transform 150ms;
    transition: transform 150ms;
    transition: transform 150ms,-webkit-transform 150ms;
    transition-timing-function: ease-in-out;
}

Как я упоминал выше, когда я запускаю эти коды в chrome все в порядке и нормально, но в Edge процесс анимации в порядке, но окончательный поворот отличается на 180 градусов!

У вас есть идеи?

Спасибо за внимание.

Обратите внимание, пожалуйста:

Вы должны знать, что направление этого кода направлено справа налево и результат в направлении LTR в порядке, но проблема в направлении RTL. Я понимаю это прямо сейчас и добавил это к моему вопросу.

...