我在网页上有一些路径动画,它们在除IE10/11以外的所有浏览器中都可以正常工作。然而,我在其他页面上有一些更简单的动画,使用了基本相同的代码,只是少用了一些,它们似乎没问题。
我认为这可能与IE相关的性能瓶颈有关。
如果您在IE10/11中查看http://codepen.io/jhealey5/pen/YXzbYY,您会发现SVG出现了故障或未完全呈现的问题。我无法确定具体问题所在。
来自codepen的相关JS代码:
我认为这可能与IE相关的性能瓶颈有关。
如果您在IE10/11中查看http://codepen.io/jhealey5/pen/YXzbYY,您会发现SVG出现了故障或未完全呈现的问题。我无法确定具体问题所在。
来自codepen的相关JS代码:
var cfg = {
easing: [0.165, 0.84, 0.44, 1],
duration: 1200,
delay: 500,
layerDelay: 7000,
width: 28,
positioning: true,
colors: [
'#027CA5',
'#75B5C6',
'#00FFD0',
'#00B994',
'#BEF5FE'
]
}
$('.shape-layer').each(function(i) {
var $this = $(this);
setTimeout(function() {
var $paths = $this.find('path');
strokeSetup($paths);
strokeOut($paths);
}, cfg.layerDelay * i);
});
function strokeSetup($el) {
$el.each(function(i) {
var $this = $(this),
pLen = Math.ceil($this.get(0).getTotalLength());
$this.css({
'stroke-dasharray': pLen,
'stroke-dashoffset': pLen,
'stroke-width': cfg.width
});
});
}
function strokeOut($el) {
var pathCount = $el.length,
iterationCount = pathCount;
$el.each(function(i) {
var $this = $(this),
pLen = Math.ceil($this.get(0).getTotalLength()),
color = cfg.colors[getRandom(0, cfg.colors.length)];
setTimeout(function() {
$this.css({
'stroke': color
});
if (cfg.positioning) {
var side = ['top', 'bottom', 'left', 'right'],
cssO = {};
$this.parent().css({
top: 'auto',
bottom: 'auto',
left: 'auto',
right: 'auto'
});
cssO[side[getRandom(0, 1)]] = getRandom(0, 40) + '%';
var firstPos = cssO[Object.keys(cssO)[0]],
sideAmount = (parseInt(firstPos) < 20) ? 100 : 20;
cssO[side[getRandom(2, 3)]] = getRandom(0, sideAmount) + '%';
$this.parent().css(cssO);
}
$this.velocity({
'stroke-dashoffset': 0,
}, {
duration: cfg.duration,
easing: cfg.easing
});
if (!--iterationCount) {
strokeIn($el);
}
}, cfg.delay * i);
});
}
function strokeIn($el) {
var pathCount = $el.length,
iterationCount = pathCount;
$el.each(function(i) {
var $this = $(this),
pLen = Math.ceil($this.get(0).getTotalLength());
setTimeout(function() {
$this.velocity({
'stroke-dashoffset': pLen
}, {
duration: cfg.duration,
easing: cfg.easing
});
if (!--iterationCount) {
strokeOut($el);
}
}, cfg.delay * i);
});
}
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}