Fading between passages

Okay, I'm using Harlowe 1.2.4. I'm trying to figure out how to get the passages to fade in and out as a transition, instead of just snapping into place. I mean all the text and everything, fading in smoothly from one page to the next. I've read every thread I can find on this topic and tried a ton of different things, but nothing has worked. When I only have text on the page and nothing else, it does work fine, but when I have the text in a div, it doesn't work. It's my first game on Twine and my first experience with CSS, so I hope I've explained the problem correctly/clearly, if someone has solved this, please help? Also I'm really dumb so if someone does know how to do this, please explain it in the simplest way possible?

I have this in the Javascript:

$(document).on('hidepassage', function() {
$('#passage').addClass('passage-in');
});
$(document).on('showpassage:after', function() {
setTimeout(function(){
$('#passage').removeClass('passage-in');
}, 40);
});

and this in the stylesheet:

#passage {
transition: opacity 400ms ease-in;
}

#passage.passage-in {
opacity: 0;
transition: opacity 0ms;
}