Issue
Relevant Fiddle: https://jsfiddle.net/promexj1/1/
I am attempting to set the two child spans within the parent div with set widths slightly smaller than the parent div (since I am starting the translation 10px to the right for the verse-one span). However I notice when rendering these spans in the DOM they revert back to half of the parent div's size (possibly because there are two of the spans).
Note I put the black border on the span elements to visualize their size
How might I decouple this inherited size divided among the child spans and instead force the spans to be rendered based on their styling widths?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.scrollable_section {
width: 125px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none;
border: #000 1px solid;
}
.scrollable_section::-webkit-scrollbar {
width: 0;
height: 0;
}
.field {
display: flex;
justify-content: space-between;
align-items: center;
width: 150px;
height: 16px;
background-color: red;
overflow: hidden;
white-space: nowrap;
transition: all 1s;
}
.verse-one {
color: white;
opacity: 1;
transform: translateX(10px);
transition: opacity 0.5s, transform 0.5s 0.5s;
}
.verse-two {
color: #000;
opacity: 0;
transform: translateX(200px);
transition: opacity 0.5s, transform 0.5s 0.5s;
}
.next-verse {
background-color: rgb(255, 255, 255);
}
.next-verse .verse-one {
opacity: 0;
transform: translateX(-200px);
}
.next-verse .verse-two {
opacity: 1;
transform: translateX(-65px);
}
</style>
</head>
<body>
<button onclick="toggleTransition()">Toggle Transition</button>
<div class="field" id="example">
<span class="verse-one scrollable_section">
I am the very model of a modern major general.
Ive information vegetable animal and mineral.
I know the kings of england and quote the fights historical
from marathon to waterloo in order categorical.
</span>
<span class="verse-two scrollable_section">
I am very well acquainted too with matters mathematical.
I understand equations both the simple and quadratical.
About binomial theorem I am teeming with a lot of news.
With many cheerful facts about the square of the hypotenuse.
</span>
</div>
<script>
function toggleTransition() {
var example = document.getElementById('example');
example.classList.toggle('next-verse');
}
</script>
</body>
</html>
Solution
Since those spans live in a flex container, you may use flex-shrink: 0
to mantain their fixed size.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
To accomodate this quick solution to your demo I just added that property to the rule for .scrollable_section
and changed the translateX
value for .verse-two
. But it wasn't perfectly clear how you were dealing with the text overflow so it's not perfectly focused on that part of the problem:
function toggleTransition() {
var example = document.getElementById('example');
example.classList.toggle('next-verse');
}
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.scrollable_section {
width: 125px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none;
border: #000 1px solid;
flex-shrink: 0; /* added */
}
.scrollable_section::-webkit-scrollbar {
width: 0;
height: 0;
}
.field {
display: flex;
justify-content: space-between;
align-items: center;
width: 150px;
height: 16px;
background-color: red;
overflow: hidden;
white-space: nowrap;
transition: all 1s;
}
.verse-one {
color: white;
opacity: 1;
transform: translateX(10px);
transition: opacity 0.5s, transform 0.5s 0.5s;
}
.verse-two {
color: #000;
opacity: 0;
transform: translateX(200px);
transition: opacity 0.5s, transform 0.5s 0.5s;
}
.next-verse {
background-color: rgb(255, 255, 255);
}
.next-verse .verse-one {
opacity: 0;
transform: translateX(-200px);
}
.next-verse .verse-two {
opacity: 1;
transform: translateX(-115px); /* changed from -65px */
}
<body>
<button onclick="toggleTransition()">Toggle Transition</button>
<div class="field" id="example">
<span class="verse-one scrollable_section">
I am the very model of a modern major general.
Ive information vegetable animal and mineral.
I know the kings of england and quote the fights historical
from marathon to waterloo in order categorical.
</span>
<span class="verse-two scrollable_section">
I am very well acquainted too with matters mathematical.
I understand equations both the simple and quadratical.
About binomial theorem I am teeming with a lot of news.
With many cheerful facts about the square of the hypotenuse.
</span>
</div>
</body>
Answered By - Diego D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.