'%20stroke='url(%23textGrad)'%20stroke-width='2'/%3e%3c!--%20Hand-drawn%20H%20path%20--%3e%3cpath%20d='M%2038%2032%20Q%2032%2060%2036%2082%20M%2035%2062%20Q%2052%2055%2072%2044%20M%2068%2028%20Q%2065%2060%2072%2082'%20fill='none'%20stroke='url(%23textGrad)'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%20filter='url(%23glow)'%20/%3e%3c/svg%3e)
.memo-text {
word-break: break-word;
max-height: 48px;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
overflow: hidden;
position: relative;
will-change: max-height;
&.memo-text-expanded {
max-height: 1000px;
transition: max-height 1s ease-in-out;
&::after {
opacity: 0;
}
}
}
์ด๋ ๊ฒ 2์ค ์ด์์ผ ๋ ์๋ ๊ทธ๋ผ๋ฐ์ด์ ์ด ์๊ธฐ๊ณ (::after ๋ถ๋ถ) ์ ๊ณ ํผ ์ ์๋ ๊ธฐ๋ฅ์ด๋ค. max-height ๋ฅผ ์กฐ์ ํด์ ๊ตฌํํ๋๋ฐ, ํผ์น ๋๋ ๋๋ฌด ๋น ๋ฅด๊ณ , ๋ซ์ ๋๋ ๋๋ฌด ๋๋ฆฐ ํ์์ด ๋ฐ์ํ๋ค.
stackoverflow.com
How to Remove Delay on Css3 Slide out transition which uses max-height transition
I'm having an issue with a transition I'm using to slide a panel in and out.Please take a look at the following jsbin http://jsbin.com/uvejuj/1/ Notice that when i click the toggle button the f...
์ฌ๊ธฐ์์ ์ฒ๋ผ cubic-bezier ๋ฅผ ์กฐ์ ํ๋ค.
!hint It's because you're animating betweenย
0ย andย1000pxยmax-height, but your content is only aboutย120pxย high. The delay is the animation happening on the 880 pixels you can't see. max-height ๊ฐ 1000px ์์ 0์ผ๋ก ์ฃผ๋ ๋์ 120px ์ง๋ฆฌ์ ์ปจํ ์ธ ๋ ์๋ฌด ๋์์ ์ํ๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๋ ๊ฒ์ด๋ค.
.text {
overflow: hidden;
max-height: 0;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
&.full {
max-height: 1000px;
transition: max-height 1s ease-in-out;
}
๊ทธ๋์ ์ด๋ ๊ฒ ๊ทน๋จ์ ์ผ๋ก ์ ๋๋ฉ์ด์ ๋์ ์ง์ ์ ๋จ์ถ์ํค๋ฉด์ ํด๊ฒฐํ๋ฏ ํ๋ค.
๋๊ธ 0๊ฐ