We Keep Coding

Smooth wrapper background-image transition, when using React onMouseEnter and onMouseLeave events on a childs

My page have a 4 sections on view port:
I need implement smooth background image transition when hovering on each section.
In my React-Next app, im using onMouseEnter/onMouseLeave events on childs, to handling
wrapper className changing, so image changing to. Full working code on codesandbox HERE
How can i achieve smooth transition when hovering on each child, of CSS do not have property background-opacity?

You can not change the background opacity, but there will be a workaround solution.
For example:
.has-background-element {
position: relative;
& > * {
position: relative;
z-index: 2;
}
&::before {
content: "";
background-image: url('');
opacity: 0;
transition: 0.5s opacity;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&:hover {
&::before {
opacity: 0;
visibility: hidden;
}
}
}
In case you need to set the background image dynamically, should replace &:before by a specific element.

.show() not working properly (no animation, no further code)

I want a top banner to ease in as soon as the website is loaded. I use JQuery to do that task, but the show() function doesn't work as expected.
$(document).ready(function() {
$('#job').show(2000, function() {
$('#cross').click(function() {
$('#job').hide();
});
});
});
.job-banner {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
background-color: #333;
display: none;
}
.job-banner:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="job" class="job-banner">
<p>...</p>
</div>
But that just shows up the div instantly without any animation and the code that should execute after the animation doesn't work as well. I tried to put an alert inside the code block that should execute after the .show() but nothing.
Is there another way of achieving that or did I do something wrong?

#Sergej Thanks, that did the trick. I just needed to also declare opacity and now I have a css transition instead which is called by JQuery.
So for the CSS:
job-banner {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
background-color: #333;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.visible {
visibility: visible;
opacity: 1;
}
And JS:
$(document).ready(function() {
$('#job').addClass('visible');
});

Transform $.show() to css

I got this css:
#pop {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 10;
display: none;
}
Until now, in order to show this #pop div I used $("#pop").show(450);
How can I do it more "Cheaply" with css? I'd like to keep the same fade in effect $.show(ms) provides, not just display it.

well you can create animation and switch class on element something like:
$('#pop').addClass('show');
and you would need css something like this:
#pop {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 10;
display: block;
visibility: hidden;
opacity: 0;
}
#pop.show {
visibility: visible;
opacity: 1;
transition: 1.45s all;
}
As far as I know display property doesn't support transitions so you will need to do it with opacity. You could potentially put both classes on same element to simulate feel of element becoming visible on page load.
Here's update with fiddle, you need to use visibility property:
https://fiddle.jshell.net/6jwfz608/

you can use JS to toggle classes using "className" and use transition in the CSS
CSS
.pop_hidden {
transition:all 450ms;
position: absolute;
top: 0;
left: -101vw;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 10;
display: none;
}
.pop_shown {
transition:all 450ms;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 10;
display: none;
}
(css edit) i got rid of display and changed it to moving the div from out of frame going right.
JS
document.getElementById('pop').className = 'pop_hidden';//to load the hidden div you can use id too
setTimeout(() => {
document.getElementById('pop').className = 'pop_shown';
}, 20);///adjustable delay if needed(ex: set to var in game loop)
Edit: my opinion on using CSS transition in combination with setting classNames. It's easy and fun to do. For a fading effect, toggle opacity. for and slide effect, toggle positions, there are tons of creative ways to change your elements. And since the naming of classes is completely arbitrary, you can have multiple classes to switch to. Also, i switched it to class out of habit(SORRY). But it should not matter, you can toggle id's the same way.

Here's an example showing onclick functionality and handled with Vanilla Javascript and no Jquery, since you wanted something less weighty.
document.getElementById('showBill').addEventListener('click', function () {
var bill = document.getElementById('bill');
if (bill.classList.contains('hide')) {
bill.classList.remove('hide');
} else {
bill.classList.add('hide');
}
});
img {
opacity: 1;
transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-webkit-transition: opacity 3s ease-in-out;
}
img.hide {
opacity: 0;
}
<button id='showBill'>Show Bill</button>
<br/>
<img src='http://fillmurray.com/300/300' class='hide' id='bill' />

Run add class on different elements concurrently jquery

I want to slide a menu bar from the left and at the same time slide the page to the right using CSS and jquery. I can do the sliding no problem but what is happening is the body slides left, then once that is complete the menu slides out
JS
$('body').toggleClass('slide-left', '');
$('.mid-side-menu').toggleClass('slide-out', '');
CSS
.slide-left {
position: fixed;
right: 300px;
transition: right 0.5s;
}
.slide-out {
transition: right 0.5s;
right: 0px;
}
How do I run the two commands at the same time?

I don't think you can accomplish what you want with your current implementation. You would need to add the same class to both items, but have the class act differently based on what it is applied to.
For example:
jQuery
$('.mid-side-menu, body').toggleClass('slide-out', '');
CSS
body.slide-out {
position: fixed;
right: 300px;
transition: right 0.5s;
}
.mid-side-menu.slide-out {
transition: right 0.5s;
right: 0px;
}

Fire Javascript during CSS/JS animation (vanilla JS)

Edit: this is an example of what I'm trying to do: http://codepen.io/anon/pen/OVzOjW
(Note that the menu and nav don't perfectly align, as the nav transition is being controlled by the CSS, and the menu delay is being controlled by the JS.)
I'm trying to create a slideout menu that fires some JS during the slide animation.
On page load, nav is fixed hidden to the right of the viewport and menu is fixed to the top right of the viewport. nav is wider than menu. On menu click fires the slideout animation of nav. I want to add a namespace class to nav that changes the CSS properties of menu. I want to do this the moment the visible portion of the nav becomes equal in width to the width of the menu, at which point the menu will just become part of the nav for the rest of the slideout.
I need to do this with some combination of CSS3 and vanilla JS (jQuery is unavailable). I can do the nav animation with CSS or JS easy enough, but timing the CSS property changes on menu is what I can't figure out.
I've tried to write a loop that constantly evaluates the right property value of nav to see if it's >= the width of menu (using CSS to do the transition), but that seems to fire the entire loop right away.
I'm not picky over a CSS vs JS solution for the animation itself, but I'd prefer CSS as I feel it's easier to control the transition settings and it runs smoother.
Relevant code below. Any help would be greatly appreciated!
HTML:
<nav id="nav">
<a id="menu" href="#">Menu</a>
Foo
Foo
Foo
</nav>
CSS:
#nav {
position: fixed;
right: -100px;
top: 0;
width: 100px;
}
#nav.expanded-nav {
right: 0;
}
#nav.expanded-menu #menu {
position: absolute;
right: auto;
top: auto;
width: 100%;
}
#menu {
position: fixed;
right: 0;
top: 0;
width: 50px;
}

You can do that with CSS animation chaining or animation-delay or simple setTimeout of Vanilla JavaScript
Check out the below code for CSS way..
$("#go").click(function() {
$(".container").addClass("demo");
});
.container {position: relative;}
#nav, #menu {
height: 100px;
width: 100px;
position: absolute;
}
#nav {
top: 10px;
left:-100px;
background: #000;
}
#menu {
top: 150px;
left:200px;
background: #f00;
}
.demo #nav {
-webkit-animation: demo 1s, demo1 2s;
-webkit-animation-delay: 0s, 1s;
-webkit-animation-timing-function: ease-in-out;
}
.demo #menu {
-webkit-animation: demo1 2s;
-webkit-animation-delay: 1s;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes demo {
0% {
left: -100px;
}
100% {
left: 200px;
}
}
#-webkit-keyframes demo1 {
0% {
left: 200px;
}
100% {
left: 300px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="go">Go</button>
<div class="container">
<div id="nav"></div>
<div id="menu"></div>
</div>

This was actually way easier than I initially thought. It can actually rather easily be solved by setting a min-width on menu and allowing it to "grow" to the full length of the parent `nav' when it slides out. Demo here: http://codepen.io/anon/pen/EjobEJ