過渡和陰影在IE11中不起作用
[英]Transition and shadow not working in 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>
1 個解決方案
解決方案1
0 2019-02-11 06:12:20
如果您嘗試稍微改變顏色，則可以看到陰影會起作用。
碼：
<!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上運行良好。
因此，您可以嘗試看看並嘗試對其進行修改。
CSS過渡不適用於IE11
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.