Переход и тень не работают в IE11 - PullRequest
Новая
       0

Переход и тень не работают в IE11

0 голосов
/ 07 февраля 2019

У меня есть это правое боковое меню, которое открывается при наведении на него курсора.Я не знаю почему, но переходы и тени не отображаются в IE11, хотя я включил такие атрибуты, как -ms-transition.

Насколько я знаю, IE поддерживает переходы начиная с IE10, поэтому я могу 'Не могу найти причину, по которой он не работает.

Тени также не видны, но Chrome и Firefox хороши ...

Я потратил много времени, пытаясь добраться доВнизу, посмотрел на многочисленные темы без успеха. 

angular.module('app',[])

.controller('mainCtrl', function() {
  var vm = this;
  
  vm.expanded = false;

  vm.expandCollapseMenu = function() {
    vm.expanded = !vm.expanded;
  };
})
.right-side-menu {
	height: 90%;
	width: 20%;
	left: calc(100% - 60px);
	display: flex;
	background: red;
	position: fixed;
	overflow: hidden;
	-webkit-box-shadow:  -1px 0 10px -2px #0000009e;
	-moz-box-shadow:  -1px 0 10px -2px #0000009e;
	box-shadow:  -1px 0 10px -2px #0000009e;
	-webkit-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	-moz-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	-ms-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	-o-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
}

.right-side-menu.right-side-menu-expanded   {
	left: 80%;
	-webkit-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	-moz-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	-ms-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	-o-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
}
<!DOCTYPE html>
<html ng-app="app">
 <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
 </head>
 <body>
    <div ng-controller="mainCtrl as vm">
      <div class="right-side-menu" ng-mouseenter="vm.expandCollapseMenu()"
           ng-mouseleave="vm.expandCollapseMenu()"
           ng-class="{'right-side-menu-expanded': vm.expanded}">
      </div>
    </div>
  </body>
 </html>

1 Ответ

0 голосов
/ 11 февраля 2019

Если вы попытаетесь немного изменить цвет, вы увидите, что тень будет работать.

Код: 

<!DOCTYPE html>
<html ng-app="app">
 <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<script>
angular.module('app',[])

.controller('mainCtrl', function() {
  var vm = this;
  
  vm.expanded = false;

  vm.expandCollapseMenu = function() {
    vm.expanded = !vm.expanded;
  };
})
</script>
<style>
.right-side-menu {
	height: 90%;
	width: 20%;
	left: calc(100% - 60px);
	display: flex;
	background: red;
	position: fixed;
	overflow: hidden;
	-webkit-box-shadow:  -1px 0 10px -2px #0000009e;
	-moz-box-shadow:  -1px 0 10px -2px #0000009e;
	/*box-shadow:  -1px 0 10px -2px #0000009e;*/
	box-shadow: -5px -5px 10px -2px #888888;
	-webkit-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	-moz-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	-ms-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	-o-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
}

.right-side-menu.right-side-menu-expanded   {
	left: 80%;
	-webkit-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	-moz-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	-ms-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	-o-transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
	transition: 0.2s cubic-bezier(0.21, 0.69, 0.7, 1);
}
</style>
 </head>
 <body>
    <div ng-controller="mainCtrl as vm">
      <div class="right-side-menu" ng-mouseenter="vm.expandCollapseMenu()"
           ng-mouseleave="vm.expandCollapseMenu()"
           ng-class="{'right-side-menu-expanded': vm.expanded}">
      </div>
    </div>
  </body>
 </html>

Выход в IE 11:

enter image description here

В IE 11 выход переходаНа него влияют строки кода CSS, такие как position и calc .

. Как вы можете видеть в этом примере W3c, переход хорошо работает с IE 11.

Пример перехода

Так что вы можете попробовать посмотреть и попытаться изменить его.

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

Нет похожих вопросов

...