Comments (2)
So i took a look at it and this behavior happens because the 0.2s transform in src/MoveResize/index.svelte triggers when resizing the grid.
{active
? transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;
: trans ? transform: translate(${cordDiff.x}px, ${cordDiff.y}px); position:absolute; transition: width 0.2s, height 0.2s;
: transition: transform 0.2s, opacity 0.2s; transform: translate(${left}px, ${top}px);
} ">`
I dont think there is a way to fix this by using the API.
`
from svelte-grid.
Created pull request #133.
In the meantime there is some kind of spaghetti fix that can be applied with the existing API. When resize is detected it overwrites all transitions on the elements for a short amount of time.
style:
.horribleSpaghettiFix :global(.svlt-grid-container) > :global(.svlt-grid-item) { transition: none !important; }
html:
<div class:horribleSpaghettiFix={cover}>
<Grid on:resize={resizeMoveHandler}>
...
<Grid/>
<div/>
javascript:
let timer
const resizeMoveHandler = () => {
stopItemMove=true
clearTimeout(timer)
timer = setTimeout(() => stopItemMove=false, 500)
}
from svelte-grid.
Related Issues (20)
- Excellent lib but is it being maintained ? HOT 6
- Inicial value of 'lastTime' in throttle function is correct?
- min height based on width. Fixed ratio HOT 1
- min, max position on x, y
- Add background grid borders
- Why there are two backgrounds HOT 2
- Prompt error in the latest svelte
- Documentation for cols property HOT 2
- Intersection event & prevent grid from repositioning it's blocks
- Freeze and unfreeze grid HOT 1
- Drag only when clicked on hot-corner HOT 1
- Items overlapping issue HOT 8
- rowHeight HOT 1
- "Unable to Limit Grid Element Resizing Beyond Parent Div"
- Height based on content
- Can't scroll on mobile device if touched on grid item. HOT 1
- The following packages have a svelte field in their package.json but no exports condition for svelte. HOT 1
- edge magnetic effect like Winamp Webamp
- svlt-grid-active and svlt-grid-shadow are misaligned HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-grid.