Javascript CSS转换在单击时不起作用

我只想在页面左下角单击时显示通知警报。通知框显示正确，但转换不起作用。我试过这样做

#通知警报{
显示：无；
字体系列：“蒙特塞拉特常规”；
颜色：白色；
底部：20px；
右：20px；
位置：固定；
背景色：#f4b251；
边框底部：4px实心#E89F3C；
颜色：#fff；
填充：20px；
边界半径：14px；
过渡计时功能：立方贝塞尔（0.175,0.885,0.32,1.275）；
过渡时间：500ms；
}

干得好，你已经开始了！

$（'警报'）.fadeIn（“缓慢”）；setTimeout（function（）{$（“#alert”）.fadeOut（2000）；}，3000）；

---

尝试此操作，将警报更改为您的警报id。

以下是工作结果

var notificationTimer=2000；//毫秒以隐藏通知警报
$（'.submit按钮'）。在（'click'，函数（）{
$（'.notification-alert'）.addClass（'notification-alert--show'）；
setTimeout（函数（）{
$（'.notification-alert'）.removeClass（'notification-alert--show'）；
}，通知计时器）
});
。通知警报{
颜色：白色；
底部：20px；
右：20px；
位置：固定；
背景色：#f4b251；
边框底部：4px实心#E89F3C；
颜色：#fff；
填充：20px；
边界半径：14px；
过渡计时功能：立方贝塞尔（0.175,0.885,0.32,1.275）；
转化：translateX（100%）；
过渡：所有500ms；
不透明度：0；
z指数：-1；
}
.通知警报--已显示{
不透明度：1；
变换：translateX（0）；
过渡：所有500ms；
}

显示通知
干得好，你已经开始了！
像这样更新CSS：

#通知警报{
颜色：白色；
底部：20px；
右：20px；
位置：固定；
背景色：#f4b251；
边框底部：4px实心#E89F3C；
颜色：#fff；
填充：20px；
边界半径：14px；
}

HTML是这样的：


干得好，你已经开始了！
您可以通过jQuery实现：

试试这个：

$("#notification-alert").css({"opacity" : "0"}); //put the opacity to 0
   $("#submit_btn").click(function(e){ //Create an identifier for the submit button
   $("#notification-alert").fadeTo(500, 1);
});

您不能转换显示属性，它要么可见，要么不可见，没有中间步骤。但是，通过动画不透明度，您可以轻松实现所需的视觉效果：


函数showAlert（）{
var$alert=$（“#通知警报”）.show（）
setTimeout（函数（）{
$alert.addClass（“显示”）
})
}
#通知警报{
显示：无；
不透明度：0；/*过渡更像动画

div.sicon a {
    background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

因此，您需要使用动作调用该动画

div.sicon a:hover {
    background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}

另外，请检查浏览器支持，如果您在尝试执行任何操作时仍有问题，请检查样式表中的css覆盖，并检查
行为：**.htc
css黑客。。
可能有什么东西覆盖了你的转换

您应该检查以下内容：
据我所知，CSS转换不会影响
显示：无
CSS属性。为此，您需要按如下方式更改代码：

#通知警报{
显示：无；
字体系列：“蒙特塞拉特常规”；
颜色：白色；
底部：20px；
右：20px；
位置：固定；
背景色：#f4b251；
边框底部：4px实心#E89F3C；
颜色：#fff；
填充：20px；
边界半径：14px；
过渡计时功能：立方贝塞尔（0.175,0.885,0.32,1.275）；
过渡时间：500ms；
}


干得好，你已经开始了！
$（“.showme”）。在（“单击”，函数（）{
$（“#通知警报”）.fadeIn（）；
});
还有JS，如下所示：


var-button=document.getElementById（'btn'）；
button.onclick=函数（）{
var alertBlock=document.getElementById（'notification-alert'））
alertBlock.classList.add（'notification-alert-visible'）；
}；
#通知警报{
颜色：白色；
底部：20px；
右：20px；
位置：固定；
背景色：#f4b251；
边框底部：4px实心#E89F3C；
颜色：#fff；
填充：20px；
边界半径：14px；
}
.隐藏通知警报{
过渡：全部。5s轻松进出；
不透明度：0；
}
。通知警报可见{
不透明度：1；
}

干得好，你已经开始了！
显示属性不能设置动画
转换
规则不能用于
显示
属性，您需要探索诸如
不透明度
或使用
左侧
，
顶部
等偏移定位的替代方法。这非常有效。但这只是显示淡入效果。但为什么这种动画不起作用rking？过渡计时功能：立方贝塞尔（0.175,0.885,0.32,1.275）；参见此示例。（成功警报）我需要那种动画。仅使用不透明度是不够的，我们不希望用户意外单击不可见警报。有没有办法在几秒钟后淡出？是的，您可以使用
设置超时（函数（）{$（“#通知警报”）).fadeTo（500，0）；}，1000）；
。将此项放在
$（“#通知警报”）的右下方。fadeTo（500，1）；
div.sicon a:hover {
    background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}