It looks pretty good to me. I can only see a few things to consider:
More precise propertyName check You have if(e.propertyName.includes('flex')) { because Safari uses flex and others use flex-grow. Are you sure that the flex substring won't be present in any other possible CSS transitions? Even if you're sure, will readers of the code be sure? I'd change to an === test against both possibilities, or at least use startsWith (which is a bit more appropriate than .includes here, since both possibilities start with flex).
You can also move the comment about the transition event name to the JS as well as the CSS.
Concise classList setting When you want to either add a class name, or remove a class name, based on a condition, you can condense an if(...) classList.add(...) else(...) classList.remove into a single classList.toggle with a second argument that indicates whether to add or remove the class. Your
if(panel.classList.contains('open')) {
panel.classList.add('open-active');
} else {
panel.classList.remove('open-active');
}
simplifies to
const { classList } = panel;
classList.toggle('open-active', classList.contains('open'));
Browser compatibility Though, some ancient browsers don't support the 2nd argument, so consider what sort of browsers you need to support. If you only want to support reasonably up-to-date browsers, it's just fine. Another thing to keep in mind is that NodeList.prototype.forEach was only introduced a few years ago, around 2016 or 2017 IIRC; like startsWith, it's newer than ES6, so either use a polyfill or use iterators and Babel instead, eg:
for (const panel of panels) {
// do stuff with panel
(if you want to support IE, you should be using Babel anyway, to transpile your code to ES5 syntax)
Void return? panels.forEach(panel => panel.addEventListener returns the value of calling addEventListener to the caller of forEach. Since forEach doesn't look at what its callbacks return, this doesn't do anything. It's not a real problem, but some might consider the code to make a bit more sense if the forEach callback returned void (no return statement or implicit return at all). (Described in TypeScript's TSLint here)
Clickable panels Since the panels are clickable, maybe change from the default cursor to cursor: pointer to make it more obvious to the user that they're meant to be clicked?
Space between elements in selectors I'd change .panel>* to .panel > * - it makes it a bit easier to read when separate elements are separated by spaces.
Repetitive panels Rather than
<div class="panel panel1">
</div>
<div class="panel panel2">
</div>
.panel1 {
background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
}
.panel2 {
background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
}
Consider using :nth-child instead, allowing you to remove the extra panel# classes entirely.
.panel:nth-child(1) {
background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
}
.panel:nth-child(2) {
background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
}
const panels = document.querySelectorAll('.panel');
panels.forEach((panel) => {
panel.addEventListener('click', () => {
const isOpen = panel.classList.contains('open');
panels.forEach(panel => panel.classList.remove('open'));
if (!isOpen) {
panel.classList.add('open');
}
});
});
panels.forEach((panel) => {
panel.addEventListener('transitionend', e => {
if (e.propertyName.includes('flex')) {
panels.forEach(panel => {
const { classList } = panel;
classList.toggle('open-active', classList.contains('open'));
});
}
})
});
html {
box-sizing: border-box;
background: #ffc600;
font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
}
body {
margin: 0;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.panels {
min-height: 100vh;
overflow: hidden;
display: flex;
}
.panel {
background: #6B0F9C;
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
color: white;
text-align: center;
align-items: center;
/* Safari transitionend event.propertyName === flex */
/* Chrome + FF transitionend event.propertyName === flex-grow */
transition:
font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
font-size: 20px;
background-size: cover;
background-position: center;
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
cursor: pointer;
}
.panel:nth-child(1) {
background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
}
.panel:nth-child(2) {
background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
}
.panel:nth-child(3) {
background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
}
.panel:nth-child(4) {
background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
}
.panel:nth-child(5) {
background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
}
/* Flex Children */
.panel > * {
margin: 0;
width: 100%;
transition: transform 0.5s;
flex: 1 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.panel *:first-child {
transform: translateY(-100%);
}
.panel *:last-child {
transform: translateY(100%);
}
.panel.open-active *:first-child,
.panel.open-active *:last-child {
transform: translateY(0);
}
.panel p {
text-transform: uppercase;
font-family: 'Amatic SC', cursive;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
font-size: 2em;
}
.panel p:nth-child(2) {
font-size: 4em;
}
.panel.open {
font-size: 40px;
flex: 5;
}
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet" type="text/css">
<div class="panels">
<div class="panel">
<p>Hey</p>
<p>Let's</p>
<p>Dance</p>
</div>
<div class="panel">
<p>Give</p>
<p>Take</p>
<p>Receive</p>
</div>
<div class="panel">
<p>Experience</p>
<p>It</p>
<p>Today</p>
</div>
<div class="panel">
<p>Give</p>
<p>All</p>
<p>You can</p>
</div>
<div class="panel">
<p>Life</p>
<p>In</p>
<p>Motion</p>
</div>
</div>
