This is my current Lorem Ipsum page.
When I click the Lorem button, the text will be expand or collapse.
https://i.sstatic.net/BldW4.png
I attempted to modify the css below to create a fading effect for the hidden text.
@keyframes open {
from {
line-clamp: 3;
-webkit-line-clamp: 3;
opacity: 0; //new
}
to {
line-clamp: initial;
-webkit-line-clamp: initial;
opacity: 1; //new
}
}
@keyframes close {
from {
line-clamp: initial;
-webkit-line-clamp: initial;
opacity: 1; //new
}
to {
line-clamp: 3;
-webkit-line-clamp: 3;
opacity: 0; //new
}
}
After incorporating this code, I discovered that the original text is also hidden.
How can I rectify this issue?
App.vue
<template>
<div id="app">
<div :class="{ box, open: showMore }">
<div class="top">
<h1>Show More</h1>
</div>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla
gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros
bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in
mauris eu nibh euismod gravida.
</p>
<button @click="handleShowMore()"><i class="arrow"></i></button>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
showMore: false,
};
},
methods: {
handleShowMore() {
this.showMore = !this.showMore;
},
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
/* Box */
.box {
margin: 22px auto;
width: 320px;
padding: 12px 32px 64px;
max-height: 162px;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}
.box.open {
max-height: 100rem;
transition: max-height 0.3s cubic-bezier(0.9, 0, 0.8, 0.2);
}
/* Text */
@keyframes open {
from {
line-clamp: 3;
-webkit-line-clamp: 3;
/* opacity: 0; */
}
to {
line-clamp: initial;
-webkit-line-clamp: initial;
opacity: 1;
}
}
@keyframes close {
from {
line-clamp: initial;
-webkit-line-clamp: initial;
opacity: 1;
}
to {
line-clamp: 3;
-webkit-line-clamp: 3;
/* opacity: 0; */
}
}
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
margin: 12px 0;
animation: close 2s linear 0.1s forwards;
}
.open .text {
animation: open 2s linear 0s forwards;
}
/* Irrelevant css... */
.arrow {
border: solid #000;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.open .arrow {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: 5px;
}
button {
background: transparent;
border: 2px solid #000;
height: 32px;
width: 32px;
border-radius: 50%;
outline: none;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
</style>
Codesandbox:
https://codesandbox.io/s/amazing-goldwasser-e6l95?file=/src/App.vue