Question

我有这个右侧菜单，当您将鼠标悬停在右侧菜单上时，它将展开。我不知道为什么，但是即使我包含了-ms-transition这样的属性，IE11上也不会显示过渡和阴影。

据我所知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>

Answer 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>
<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中的输出：

在IE 11中，转换的输出受CSS代码行的影响，例如 position 和 calc 。

在此W3c示例中，您可以看到IE 11的过渡效果很好。

Transition Example

因此，您可以尝试一下并尝试对其进行修改。

过渡和阴影在IE11中不起作用

1 个答案: