主页 / 问题 / 582349
Accepted
qwertet
Asked:2020-10-25 07:34:09 +0000 UTC2020-10-25 07:34:09 +0000 UTC

如何防止页面刷新时 chrome 中的自发过渡动画？有一个没有脚本的解决方案！

  • 772

我发现了一堆类似的问题，但没有看到问题的解决方案。

通常，例如，有一个按钮和一个transition动画被分配给它。一切正常，但在 chrome 中，当您刷新页面时，所有动画都会跳转。例如，如果一个按钮的паддинги链接颜色为白色，那么当页面更新时，它会паддинги从标准尺寸变为指定尺寸，并且按钮链接的颜色从标准的蓝色或紫色平滑地变为白色。

ffox中没有这样的东西。您可以仅为 设置动画:hover，问题就消失了，但出现另一个问题 - 当您从按钮上移开鼠标时，它会在没有动画的情况下返回到标准给定尺寸。 

body {
	background-color:#2e3436;
}
a {
	color:#ccc;
	text-decoration:none;	
}
/*---------/// UP BUTTON ///---------*/
.upbtn {
	position: fixed;
	bottom:30px;
	left:30px;
	display:block;
	transition: 0.3s;
	transition-timing-function:ease-in-out;
}
.upbtn:hover{
	transform: rotate(1deg);
	bottom:34px;
}
.upbtn a {
	border-radius:0 14px 0 14px;
	border:1px solid #ccc;
	padding: 5px 15px;
	opacity:0.3;
	transition: 0.3s;
	transition-timing-function:ease-in-out;
}
.upbtn a:hover {
	text-decoration:none;
	background-color:#ccc;
	color:#2e3436;
	opacity:1;	
	padding: 7px 19px;	
}
<div class="upbtn"><a href="#top"><b>▲ ВВЕРХ</b></a>
	</div>

css

3 个回答

  1. 是的，Firefox 不会为起始值设置动画。而在相反的方向上，当在元素上设置过渡时动画起作用。为了防止任何东西在加载时产生动画效果，您可以使用keyframes或执行类似的操作：

    .load * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

    和

    $(window).load(function() {
  $("body").removeClass("load");
});
    • 2
  2. Best Answer

    最后！！！！！！这发生过！！！！！！！！！！！！！！！！！！我找到了一个简单的答案！没有！这个链接有帮助

    一般来说，诀窍是去掉必要的属性，因为所有的东西都从带有标签的连接样式中跳出来style

    例如，在我的示例中，按钮的标签是一个链接，当页面加载时，链接的颜色在 CHROME 上从标准的蓝色/紫色平滑地变为外部样式中指定的灰色。在我的示例中，您只需要将其从外部样式中取出即可

    a { color:#ccc; text-decoration:none; }

    在标签中style以及之后这些属性不会打扰！

    • 0

  3. 在标签的末尾，<body>写一个<script> </script>内部有空格的标签 - 就完成了。

    • 0

相关问题