animate-css-grid:CSS网格的无痛过渡

时间:2024-03-14 19:49:26
【文件属性】:

文件名称:animate-css-grid:CSS网格的无痛过渡

文件大小:5.84MB

文件格式:ZIP

更新时间:2024-03-14 19:49:26

css-grid animations transitions TypeScript

动画CSS网格 无缝设置所有CSS网格属性的动画,包括: grid-column和grid-row grid-template-columns grid-gap 使用此脚本可以轻松地将CSS网格从一种状态优雅地过渡到另一种状态。 如果网格的内容发生更改,或者通过添加或删除类来更新网格或其子级之一,则网格将自动过渡到其新配置。 如何使用它 只需在网格容器上调用wrapGrid方法,并可以选择提供一个配置对象作为第二个参数。 如果从页面上删除了网格,动画也将自动清除。 ES6模块: yarn add animate-css-grid或npm install animate-css-grid import { wrapGrid } from 'animate-css-grid' const grid = document . querySelector ( ".grid" ) ; wra


【文件预览】:
animate-css-grid-master
----yarn.lock(190KB)
----webpack.config.js(346B)
----src()
--------types.ts(1KB)
--------index.ts(11KB)
----.babelrc(67B)
----.npmignore(78B)
----demo()
--------index.html(8KB)
--------index.css(3KB)
--------webpack.config.js(470B)
--------index.js(5KB)
----examples()
--------grid-column-optimized.gif(3.26MB)
--------grid-gap-optimized-1.gif(1.07MB)
--------grid-template-columns-optimized-1.gif(1.46MB)
----tsconfig.json(313B)
----.prettierrc(281B)
----tslint.json(362B)
----README.md(4KB)
----dist()
--------main.js(23KB)
--------main.js.map(175KB)
--------index.d.ts(241B)
--------types.d.ts(1KB)
----.gitignore(58B)
----package.json(1KB)

网友评论