css-transition-sample

by Ting-Yuan Chang

HTML

<h3>Jiwa-Jiwa</h3>
<div class="sample">
    <div class="inner">
        
        <div style="background:steelblue;">koko </div>
        no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei gaff kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga
    kawarimaskoko no haikei ga kawarimaskoko no haikei
        <div style="background:steelblue;"> ga</div>
        kawarimas<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>.<br/><br/>
        <div style="background:steelblue;">.abc</div></div>
</div>
<div class="sample"><div class="inner"><div style="background:steelblue;">abckoko no haike</div>i ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei gaff kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimaskoko no haikei ga kawarimas
    </div></div>
<input type="button" id="a"><input type="button" id="b">

CSS

.sample {
    max-height: 0;
	transition: max-height 0.8s ;
    overflow: auto;
    background: #d5d5d5;
    display:inline-block;
    padding-right: 5px;
    
}
.inner{
    float:left;
    width: 850px;
}
.sampleTest {
    max-height: 200px;
}

.sample::-webkit-scrollbar {
    width: 5px;
    position:fixed;
    left: -70px;
}
 
.sample::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0); 
    border-radius: 10px;
}
 
.sample::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

JavaScript

$("#a").click(function() {
    $(".sample").addClass("sampleTest");
});

$("#b").click(function() {
    $(".sample").removeClass("sampleTest");
});