[英]Triggering CSS transition in Javascript
I want to trigger a CSS transition (fade-in message) in Javascript (using no framework) when there is an error. 发生错误时,我想在Javascript(不使用框架)中触发CSS转换(淡入消息)。 I added a trigger class to my div, but it doesn't fade in when the error pops up.
我在div中添加了一个触发器类,但是当错误弹出时它不会消失。 Any ideas how I could fix this?
有什么想法我可以解决这个问题吗?
HTML file: HTML档案:
<div id="errorID" class="errorMessage">
<strong>Error!</strong> Something went wrong.
</div>
Javascript file: Javascript文件:
if (!valid){ // error -> errorTextMessage
var errorBox = document.getElementsById('errorID');
errorBox.classList.add("errorTrigger");
}
CSS file: CSS文件:
.errorMessage{
padding: 20px;
background-color: #f44336;
color: white;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
}
.errorMessage.errorTrigger{
zoom: 1;
filter: alpha(opacity=50);
opacity: 1;
}
-webkit-transition
is an experimental property that webkit-based browsers used (a long time ago) when testing their implementations of transition
. -webkit-transition
是实验性属性,基于Webkit的浏览器(很久以前)在测试其transition
的实现时使用过。
It should never be used in production and no modern browser supports it. 永远不要在生产中使用它,也没有现代的浏览器支持它。
Use the real transition
property. 使用实际的
transition
属性。
正如@Bhuwan所说,我在document.getElementById
有一个错字。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.