时间戳

首页 > 解决方案 > 过渡和阴影在 IE11 中不起作用

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

问题描述

我有这个右侧菜单，当你将鼠标悬停在它上面时它会展开。我不知道为什么，但即使我包含了 -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>

标签： htmlcssinternet-explorer

解决方案

如果您尝试稍微更改颜色，则可以看到阴影会起作用。

代码：

<!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 中，transition 的输出受 CSS 代码行的影响，例如position和calc。

正如您在这个 W3c 示例中看到的那样，过渡在 IE 11 中运行良好。

过渡示例

所以你可以尝试看看并尝试修改它。

推荐阅读