List / Grid / Tile view transitions using jquery or javascript-CodePudding

The

I have surfed a lot regarding grid/list view with animation, but got only grid/list view solutions. but i need grid/list view along with animation(i,e tranistion effect). I have attached sample video of the transition effect.

CodePudding user response：

I know this does not exactly look like your desired result, but maybe it´s suitable for u or you can build up on it. i just used a transition on width and an interval to have a small delay in the transform.

function toggle(){ var k= 0; var i = setInterval(function(){ t = $('.test').length; if(k>t){ clearInterval(t) } $('.test').eq(k).toggleClass("test2"); k ; },120) } setTimeout(function(){ toggle() },1000)

.wrap { width:500px; min-height:100vh; position:relative; margin: 0 auto; } .test { color:white; margin:10px; background:black; width:100px; height:100px; float:left; -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; } .test2 { width:100%; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap"> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> </div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If u wanted it to be exactly like in the video u would probably have to work with translate-x translate-y

CodePudding user response：

https://codepen.io/shahriarkh/pen/NWvOyry?editors=0110

Here it is!
I used grid because it's animateable, since it's a 2d grid while both block and flex are 1d.

However, there's a problem with the appearing scroll bar on the right. It's damn annoying and I couldn't find a way to fix it. In line 9 of JS code, every card should move to left by 120px * N, but when the scrollbar appears, it's no longer 120 and becomes a bit larger than 120 (like 126). I don't know where it is coming from... although 120 works fine when you add overflow-y: hidden to body, it's not an applicable workaround (you need the scroll!).

Update

I found the solution! Using overflow-y: scroll scrollbar-width: none does the trick. However, you need to somehow let users know the page is scrollable.

BTW, what's the original video? I'm wondering if it's a webpage and somebody already did this :) Also, Framer Motion might be a good choice instead of harcoding.