react-dynamic-content
Version:
React Dynamic Content ===
47 lines (46 loc) • 1.16 kB
CSS
.CustomContentWrapper{
display:block;
width:100%;
}
.CustomContentWrapper > *{
transition: opacity 1s linear, left 0.15s linear,top 0.15s linear;
-webkit-transition: opacity 1s linear, left 0.15s linear,top 0.15s linear;
visibility: hidden;
position:fixed; /* prevent scroll overflow before even visible */
}
.displayNone{
display:none ; /* this (and nothing else) triggers fadein animation when toggled */
}
.positionAbsolute{
position:absolute;
}
.visible{
visibility: visible;
}
.CustomContentWrapper > .dragging{
transition: opacity 1s linear, left 0s linear,top 0s linear;
-webkit-transition: opacity 1s linear, left 0s linear,top 0s linear;
z-index:1;
}
.fadeInOut-enter, .fadeInOut-appear {
animation: CustomContentFadeIn 1s;
}
.fadeInOut-leave.fadeInOut-leave-active {
animation: CustomContentFadeOut 1s;
}
@keyframes CustomContentFadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes CustomContentFadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes CustomContentFadeOut {
0% {opacity:1;}
100% {opacity:0;}
}
@-webkit-keyframes CustomContentFadeOut {
0% {opacity:1;}
100% {opacity:0;}
}