CSS动画叠加到淡入淡出和 [英] Animate CSS Overlay to FadeIn and FadeOut
问题描述
我有一个CSS覆盖覆盖整个视口单击按钮时。它fadesIn从不透明度：0 到不透明度：1。使用CSS关键帧
叠加取决于一个js插件添加一个类到＆LT;身体GT; 元素。因此，当所应用类，覆盖设置为显示：块
我试图动画反向这种效果。所以当类被删除，叠加淡出。
我明白，我可以申请多个动画到 .overlay 类，但我不能确定如何进行。
任何想法我怎么可能扭转动画？
.overlay {
//覆盖基本样式
位置：固定;
背景：RGBA（0，0，0，0.75）;
宽度：100％;
高度：100％;
显示：无;
的z-index：999999;
光标：指针; //为叠加设置过渡
-webkit-过渡：所有425ms缓解-IN-OUT;
-moz-过渡：所有425ms缓解-IN-OUT;
-ms过渡：所有425ms缓解-IN-OUT;
-o过渡：所有425ms缓解-IN-OUT;
过渡：所有425ms缓解-IN-OUT;
//设置动画持续时间
-webkit-动画持续时间：1.1s;
-moz-动画持续时间：1.1s;
-ms动画持续时间：1.1s;
-o-动画持续时间：1.1s;
动画持续时间：1.1s; //设置动画填充模式
-webkit-动画填充模式：两者;
-moz-动画填充模式：两者;
-ms动画填充模式：两者;
-o-动画填充模式：两者;
动画填充模式：两者; //命名动画
-webkit-动画名称：淡入;
-moz-动画名称：淡入;
-ms动画名称：淡入;
-o-动画名称：淡入;
动画名称：淡入;
}//当展示类应用
//使叠加显示块
.scotch-是-显示.overlay {
显示：块;
}//设置关键帧动画
//浏览器
@ -webkit-关键帧淡入{
0％{不透明度：0; }
100％{不透明度：1; }
}//火狐
@ -moz-关键帧淡入{
0％{不透明度：0; }
100％{不透明度：1; }
}//歌剧院
@ -o-关键帧淡入{
0％{不透明度：0; }
100％{不透明度：1; }
}//所有其他浏览器
@keyframes淡入{
0％{不透明度：0; }
100％{不透明度：1; }
}
我可能会使用一个辅助类，然后切换该类触发动画。
这样的：
.overlay {
//覆盖基本样式
位置：固定;
背景：RGBA（0，0，0，0.75）;
宽度：100％;
高度：100％;
显示：无;
的z-index：999999;
光标：指针; 不透明度：0; -webkit-过渡：所有1.1s易于在出;
-moz-过渡：所有1.1s易于在出;
-ms过渡：所有1.1s易于在出;
-o过渡：所有1.1s易于在出;
过渡：所有1.1s易于在出;
}
.scotch-是-显示.overlay {
显示：块;
不透明度：1;
}
您不会因为它从0只是改变不透明度为1需要的关键帧。
切换的淡入使用JavaScript类。添加它将在覆盖褪色，去除其将淡出了出来。
这可能是这样的：
$（'叠加'）toggleClass（'淡入'）;
更新
我错过了对插件和显示切换的部分。这应该仍然工作，你就不必担心JavaScript的切换。我已经更新了上述的CSS的CSS选择器。 显示不动，但不透明度呢。
I have a css overlay that covers the entire viewport when a button is clicked. It fadesIn from opacity: 0 to opacity: 1 using css keyframes.
The overlay is dependent upon a js plugin adding a class to the <body> element. So when that class is applied, the overlay is set to display: block
I'm trying to animate this effect in reverse. So when the class is removed, the overlay fades out.
I understand that I can apply multiple animations to the .overlay class, but I'm unsure how to proceed.
Any ideas how I might reverse the animation?
.overlay {
// Overlay base styles
position: fixed;
background: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100%;
display: none;
z-index: 999999;
cursor: pointer;
// Set transition for overlay
-webkit-transition: all 425ms ease-in-out;
-moz-transition: all 425ms ease-in-out;
-ms-transition: all 425ms ease-in-out;
-o-transition: all 425ms ease-in-out;
transition: all 425ms ease-in-out;
// Set the animation duration
-webkit-animation-duration: 1.1s;
-moz-animation-duration: 1.1s;
-ms-animation-duration: 1.1s;
-o-animation-duration: 1.1s;
animation-duration: 1.1s;
// Set the animation fill mode
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
// Name the Animation
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-ms-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
// When is showing class is applied
// make the overlay display block
.scotch-is-showing .overlay {
display: block;
}
// Setup keyframes animations
// Chrome
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
// Firefox
@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
// Opera
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
// All other browsers
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
I would probably utilize a helper class, and then toggle that class to trigger your animation.
Like this:
.overlay {
// Overlay base styles
position: fixed;
background: rgba(0, 0, 0, 0.75);
width: 100%;
height: 100%;
display: none;
z-index: 999999;
cursor: pointer;
opacity: 0;
-webkit-transition: all 1.1s ease-in-out;
-moz-transition: all 1.1s ease-in-out;
-ms-transition: all 1.1s ease-in-out;
-o-transition: all 1.1s ease-in-out;
transition: all 1.1s ease-in-out;
}
.scotch-is-showing .overlay{
display:block;
opacity: 1;
}
You don't need key-frames since its just changing opacity from 0 to 1.
Toggle the fadeIn class using javascript. Adding it will fade in the overlay and removing it will fade it out.
using jQuery it might look like this:
$('.overlay').toggleClass('fadeIn');
UPDATE
I missed the part about the plugin and the display toggle. This should still work, you just don't have to worry about the javascript toggle. I have updated the css selector in the above css. display doesn't transition but opacity does.
这篇关于CSS动画叠加到淡入淡出和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
