针对flex属性设置的css动画在ie11中没有反应
如下图：
功能大概是我点击蓝色的区域会触发蓝色区域变大，红色区域变小的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
body {
display: flex;
width: 100vw;
height: 100vh
}
#ni {
flex: 1 1 auto;
background-color: aqua;
animation: 200ms forwards;
}
#kk{
flex: 3 1 auto;
background-color: red;
}
@keyframes huandong {
from {
flex: 1 1 auto
}
to {
flex: 2 1 auto
}
}
@keyframes huandong1 {
from {
flex: 2 1 auto
}
to {
flex: 1 1 auto
}
}
</style>
</head>
<body>
<div id="ni"></div>
<div id="kk"></div>
<script>
document.getElementById('ni').onclick = function () {
if (!document.getElementById('ni').style.animationName) {
document.getElementById('ni').style.animationName = 'huandong'
}
else if (document.getElementById('ni').style.animationName == 'huandong') {
document.getElementById('ni').style.animationName = 'huandong1'
}
else {
document.getElementById('ni').style.animationName = 'huandong'
}
}
</script>
</body>
</html>
