Safari上的动画和动画延迟行为随机发生

时间：2018-12-17 10:35:39

标签： javascript css animation browser safari

我正在尝试制作一个页面的动画，该页面包含三个主要组成部分，两个表和一个图表。 请参考JSFiddle在Safari浏览器中复制相同的内容。

Link to JSFiddle

第一张表的两行依次显示，即绿色行滑入然后滑出，提示黄色行滑入。几秒钟后，黄色行滑出然后绿色返回。当绿色变回原来的位置时。

下面的两个div同时滑入。现在，发生的事情是我将绿色行滑出后设置为绝对，以便黄色行在相同位置上移，但是在Safari上，绿色行中的“位置：绝对”不适用。 

@-webkit-keyframes slideRightDisappear {
    0% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    99% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        position: absolute;
    }
}

@keyframes slideRightDisappear {
    0% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    99% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    100% {
        position: absolute;
    }
}

滑出时的黄色行也没有占据绝对位置，将下部的两个部分向上拉。

@-webkit-keyframes slideLeftDisappear {
    0% {
        display: inline;
        opacity: 1;
    }
    99% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
    100% {
        position: absolute;
        opacity: 0;
    }
}

@keyframes slideLeftDisappear {
    0% {
        display: inline;
        opacity: 1;
    }
    99% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
    100% {
        position: absolute;
        opacity: 0;
    }
}

此外，底部的两个部分没有动画，只是突然出现。

在Chrome上检查小提琴，这是它的理想工作方式，然后在Safari上检查它是否是主要问题。

不要对我注入动画的方式感到困惑，我的要求是我想链接多个动画并按需启动和停止它们，所以我要做的是，传递动画属性列表并单独加入它们并将其添加到DOM样式。我早些时候连接了速记，但显然Safari并没有考虑速记，因此我走了一步，将每个动画拆分为其属性。

另外，我无法复制的另一个问题是，当我单击“动画”按钮时，所有动画同时运行，而忽略了我给的延迟。

function animator () {
  addAnimationToElement('row-1', ['fadeInLeftBig', 'slideRightDisappear', 'slideLeftAppear'], ['0.5s', '0.3s', '0.5s'], ['linear', 'linear', 'linear'], ['0.6s', '3s', '7.5s'], ['1', '1', '1'], ['normal', 'normal', 'normal'], ['forwards', 'forwards', 'forwards'], ['running', 'running', 'running'])

addAnimationToElement('row-2', ['slideInLeft', 'slideLeftDisappear'], ['0.5s', '0.5s'], ['linear', 'linear'], ['4s', '6.5s'], ['1', '1'], ['normal', 'normal'], ['forwards', 'forwards'], ['running', 'running'])

addAnimationToElement('table', ['fadeInLeftBig'], ['1.5s'], ['cubic-bezier(0.215, 0.61, 0.355, 1)'], ['9s'], ['1'], ['normal'], ['forwards'], ['running'])

addAnimationToElement('chart', ['fadeInRightBig'], ['1.5s'], ['cubic-bezier(0.215, 0.61, 0.355, 1)'], ['9s'], ['1'], ['normal'], ['forwards'], ['running'])
  
}

function pause () {
	document.getElementById('portfolio').style.opacity = 0;
}


function addAnimationToElement (elementID, animationName, animationDuration, animationTimingFunction, animationDelay, animationIterationCount, animationDirection, animationFillMode, animationPlayState) {
      // Animation for Safari
      document.getElementById(elementID).style.WebkitAnimationName = animationName.join(', ')
      document.getElementById(elementID).style.WebkitAnimationDuration = animationDuration.join(', ')
      document.getElementById(elementID).style.WebkitAnimationTimingFunction = animationTimingFunction.join(', ')
      document.getElementById(elementID).style.WebkitAnimationDelay = animationDelay.join(', ')
      document.getElementById(elementID).style.WebkitAnimationIterationCount = animationIterationCount.join(', ')
      document.getElementById(elementID).style.WebkitAnimationDirection = animationDirection.join(', ')
      document.getElementById(elementID).style.WebkitAnimationFillMode = animationFillMode.join(', ')
      document.getElementById(elementID).style.WebkitAnimationPlayState = animationPlayState.join(', ')
      // Animation for other browsers
      document.getElementById(elementID).style.animationName = animationName.join(', ')
      document.getElementById(elementID).style.animationDuration = animationDuration.join(', ')
      document.getElementById(elementID).style.animationTimingFunction = animationTimingFunction.join(', ')
      document.getElementById(elementID).style.animationDelay = animationDelay.join(', ')
      document.getElementById(elementID).style.animationIterationCount = animationIterationCount.join(', ')
      document.getElementById(elementID).style.animationDirection = animationDirection.join(', ')
      document.getElementById(elementID).style.animationFillMode = animationFillMode.join(', ')
      document.getElementById(elementID).style.animationPlayState = animationPlayState.join(', ')
    }
.transparent_element {
	opacity: 0;
}

#row-1 {
  width: 300px;
  height: 100px;
  display: block;
  background-color: green;
}

#row-2 {
  width: 300px;
  height: 100px;
  display: block;
  background-color: yellow;
}

#table {
  width: 150px;
  height: 150px;
  background-color: red;
  display: inline-block;
}

#chart {
  width: 150px;
  height: 150px;
  background-color: blue;
  position: absolute;
  right: 0;
  display: inline-block;
}


@-webkit-keyframes slideLeftAppear {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
		-webkit-transform: translate3d(100%, 0, 0);
	}
	100% {
		transform: translate3d(0, 0,);
		-webkit-transform: translate3d(0);
		position: relative;
		display: block;
		opacity: 1;
	}
}

@keyframes slideLeftAppear {
	0% {
		opacity: 0;
		transform: translateX(100%);
		-webkit-transform: translateX(100%);
	}
	100% {
		transform: translateX(0);
		-webkit-transform: translateX(0);
		position: relative;
		display: block;
		opacity: 1;
	}
}

@-webkit-keyframes slideRightDisappear {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	99% {
		transform: translateX(100%);
		-webkit-transform: translateX(100%);
	}
	100% {
		position: absolute;
	}
}

@keyframes slideRightDisappear {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 0;
	}
	99% {
		transform: translateX(100%);
		-webkit-transform: translateX(100%);
	}
	100% {
		position: absolute;
	}
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(400px, 0, 0);
    transform: translate3d(400px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(400px, 0, 0);
    transform: translate3d(400px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes slideLeftDisappear {
	0% {
		display: inline;
		opacity: 1;
	}
	99% {
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
	}
	100% {
		position: absolute;
		opacity: 0;
	}
}

@keyframes slideLeftDisappear {
	0% {
		display: inline;
		opacity: 1;
	}
	99% {
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
	}
	100% {
		position: absolute;
		opacity: 0;
	}
}
<div>

<button onclick="animator()">
Animate
</button>
<button onclick="pause()">
Pause
</button>
<table>
<tr id="row-1" class="transparent_element" style="-webkit-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); -moz-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75);  height: 90px;">
  </tr>
<tr id="row-2" class="transparent_element" style="-webkit-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); -moz-box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75); box-shadow: 6px 4px 11px 1px rgba(0,0,0,0.75);  height: 90px;">
  </tr>          
</table>

<div id="table" class="transparent_element"></div>
<div id="chart" class="transparent_element"></div>

</div>
</div>

任何想法或建议都会受到高度赞赏。

提前谢谢！

0 个答案:

没有答案
相关问题
最新问题