※このページは UIアニメーション実装の最適解、CSS Transitions+class操作を使おうのデモページです。

Animate Sidebar

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere fugiat cum recusandae maiores nulla, reiciendis eius veritatis corporis pariatur dolore facilis aliquam dolorem voluptatibus odit, accusantium nostrum porro corrupti a.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quam fuga facilis dicta earum beatae soluta harum sit expedita, perferendis quibusdam nobis omnis reiciendis maxime sed tenetur consequatur et excepturi! Lorem ipsum dolor sit amet.

With Transition

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere fugiat cum recusandae maiores nulla, reiciendis eius veritatis corporis pariatur dolore facilis aliquam dolorem voluptatibus odit, accusantium nostrum porro corrupti a.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam quam fuga facilis dicta earum beatae soluta harum sit expedita, perferendis quibusdam nobis omnis reiciendis maxime sed tenetur consequatur et excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum porro corporis itaque animi! Officiis impedit distinctio laboriosam iste autem aut atque aperiam ducimus commodi velit laborum magnam quos, ut voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus obcaecati tempore excepturi, dolore incidunt iste hic consectetur pariatur libero, quos sed animi facilis dolores officia, sapiente maxime laudantium laborum. Voluptatem.

With Transition

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere fugiat cum recusandae maiores nulla, reiciendis eius veritatis corporis pariatur dolore facilis aliquam dolorem voluptatibus odit, accusantium nostrum porro corrupti a.