2020.06.04 追記
setAttributeをつかって更新するとスタイルが反映されることに気づきました!
--
その昔、Androidではまったことがありましたが、まさかIE11でも動的に属性セレクタを変更した際にスタイルが反映されないとは思いもしませんでした。
DEMO
※ IE11では動きませんでした
HTML
<div data-is-show-dialog="false"></div>
SCSS
[data-is-show-dialog] { visibility: visible; position: fixed; top: 50px; bottom: 50px; left: 50px; right: 50px; opacity: 1; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .2); transform: scale(1); transition: all .2s ease-in-out; &[data-is-show-dialog="false"] { visibility: hidden; opacity: 0; transform: scale(.8); } }
対策
DEMO
HTML
<div data-is-show-dialog="false"></div>
SCSS
[data-is-show-dialog] { visibility: visible; position: fixed; top: 50px; bottom: 50px; left: 50px; right: 50px; opacity: 1; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, .2); transform: scale(1); transition: all .2s ease-in-out; &[data-is-show-dialog="false"], .data-is-show-dialog { visibility: hidden; opacity: 0; transform: scale(.8); } }
JavaScript
setInterval(function() { document.querySelector('[data-is-show-dialog]').dataset.isShowDialog = !(document.querySelector('[data-is-show-dialog]').dataset.isShowDialog === 'true'); document.querySelector('[data-is-show-dialog]').classList.toggle('data-is-show-dialog'); }, 1000);
泣く泣くclassを振ることにしました。