我尝试编写一个小插件,以更有机的方式打开模态框,因此我决定为 clip-path 属性设置动画。
现在此代码仅适用于 chrome: http ://codepen.io/meodai/pen/GgGzYo?editors=011
看起来firefox 不支持 polygon()
clip-path 属性。Safari 和移动 Safari 也确实在为此苦苦挣扎。
是否有类似的简单方法可以在 Firefox 和 Safari 以及 Mobile Safari 中进行这项工作?知道如何解决这个问题吗?
这是一个工作示例:
var $ov = $('.overlay');
$(document).on('click touchstart', '.inner', function(){
var coords, coordArray, coordsString;
coords = this.getBoundingClientRect();
coordArray = [
Math.floor(parseInt(coords.left)) + 'px ' + Math.floor(parseInt(coords.top)) + 'px',
Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil(parseInt(coords.top)) + 'px',
Math.ceil((parseInt(coords.left) + parseInt(coords.width))) + 'px ' + Math.ceil((parseInt(coords.top) + parseInt(coords.height) )) + 'px',
Math.ceil(parseInt(coords.left)) + 'px ' + Math.floor((parseInt(coords.top) + parseInt(coords.height) )) + 'px'
];
coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
$ov.css({
'-webkit-clip-path': coordsString,
'clip-path': coordsString
});
setTimeout(function(){
$ov.addClass('show');
},50);
setTimeout(function(){
coordsString = 'polygon(0% 0%,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
$ov.css({
'-webkit-clip-path': coordsString,
'clip-path': coordsString
});
},100);
setTimeout(function(){
coordsString = 'polygon(0% 0%,100% 0%,' + coordArray[2] + ',' + coordArray[3] + ')';
$ov.css({
'-webkit-clip-path': coordsString,
'clip-path': coordsString
});
},180);
setTimeout(function(){
coordsString = 'polygon(0% 0%,100% 0%,100% 100%,' + coordArray[3] + ')';
$ov.css({
'-webkit-clip-path': coordsString,
'clip-path': coordsString
});
},260);
setTimeout(function(){
coordsString = 'polygon(0% 0%,100% 0%,100% 100%,0 100%)';
$ov.css({
'-webkit-clip-path': coordsString,
'clip-path': coordsString
});
},340);
// reverse
setTimeout(function(){
coordsString = 'polygon(0% 0%,100% 0%,100% 100%,' + coordArray[3] + ')';
$ov.css({
'-webkit-clip-path': coordsString,
'clip-path': coordsString
});
},1500);
setTimeout(function(){
coordsString = 'polygon(0% 0%,100% 0%,' + coordArray[2] + ',' + coordArray[3] + ')';
$ov.css({
'-webkit-clip-path': coordsString,
'clip-path': coordsString
});
},1580);
setTimeout(function(){
coordsString = 'polygon(0% 0%,' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
$ov.css({
'-webkit-clip-path': coordsString,
'clip-path': coordsString
});
},1640);
setTimeout(function(){
coordsString = 'polygon(' + coordArray[0] + ',' + coordArray[1] + ',' + coordArray[2] + ',' + coordArray[3] + ')';
$ov.css({
'-webkit-clip-path': coordsString,
'clip-path': coordsString
});
},1740);
setTimeout(function(){
$ov.removeClass('show');
},2000);
});
body, html {
background: silver;
}
.grid {
float: left;
width: 25%;
height: 25vw;
box-shizing: border-box;
position: relative;
}
.inner {
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
background: #ddd;
-webkit-transition: background-color 111ms;
transition: background-color 111ms;
}
.inner:hover {
background: #fff;
}
.overlay {
opacity: 0;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #fff;
pointer-events: none;
box-sizing: border-box;
padding: 20px;
}
.overlay.show {
opacity: 1;
will-change: clip-path;
-webkit-transition: clip-path 200ms;
transition: clip-path 200ms;
-webkit-transition: -webkit-clip-path 200ms;
transition: -webkit-clip-path 200ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="grid">
<div class="inner"></div>
</div>
<div class="overlay"></div>