css-transitions 相关问题

CSS Transitions允许CSS值的属性更改在指定的持续时间内平滑发生。

网格模板列 fr 到 px 值的转换

我有这个 HTML / CSS 片段： .test123 { 网格模板列：255px 255px；过渡：200ms；显示：网格；间隙：30px；。卡片 { 边框半径：50px；边框：1px实线#BBD...

css css-grid css-transitions

回答 2 投票 0

CSS - grid-template-columns fr 到 px 值的转换

我有这个 HTML / CSS 片段： .test123 { 网格模板列：255px 255px；过渡：200ms；显示：网格；间隙：30px；。卡片 { 边框半径：50px；边框：1px实线#BBD...

css css-grid css-transitions

回答 1 投票 0

为什么子元素动画会触发父元素的transitionend事件？

我将一个transitionend事件绑定到div1。当 div1 的转换结束时，事件运行。没问题。我遇到一个特殊情况：我在这个 div1 中添加了 3 个段落，每个段落的

html css css-transitions transition

回答 1 投票 0

如何使用 width: auto 转换内容的宽度？

我有一个元素，我想在其内容更改时为其宽度设置动画。它的宽度：自动，并且永远不会改变。我见过这个技巧，但那是为了在两个值和一个值之间转换......

css animation css-transitions css-animations

回答 2 投票 0

在 CSS3 或 jQuery 中将元素的宽度从 0 动画到 100%，其及其包装器仅达到需要的宽度，无需预设宽度

http://jsfiddle.net/nicktheandroid/tVHYg/ 当悬停 .wrapper 时，它的子元素 .contents 应从 0px 动画到其自然宽度。然后当鼠标从 .wrapper 中移除时，它应该

jquery css css-transitions

回答 7 投票 0

使用 mouseenter 事件设置状态时，css 过渡属性不起作用

我想在悬停按钮时在按钮旁边显示动画文本。当我在按钮上使用 click 事件时，这工作正常，但在使用 mouseenter 和 mouseleave 事件时，这不起作用。我是

javascript css reactjs typescript css-transitions

回答 1 投票 0

HOC 图像悬停组件未使用 Tailwind CSS 定位伪元素

我正在使用 Astro 和 Tailwind CSS。为什么以下不起作用？我有这个 HOC HoverScale.astro 组件： // HoverScale.astro 我正在使用 Astro 和 Tailwind CSS。为什么以下不起作用？我有这个 HOC HoverScale.astro 组件： // HoverScale.astro <span class="[&>img]:lg:group-hover:scale-10 group [&>img]:transition [&>img]:duration-300 [&>img]:ease-in-out"> <slot /> </span> 我在另一个组件中使用它，例如： <a href="foo"> <HoverScale> <Picture src={url} alt={title} /> </HoverScale> </a> 此图片组件呈现一个 <img /> 标签。当我直接在图片组件上添加 Tailwind 实用程序 transition duration-300 ease-in-out lg:group-hover:scale-105 时，它工作得很好。为什么这不起作用？首先，考虑检查：视口大于 lg 断点。您有 10 作为 scale 的值： module.exports = { theme: { extend: { scale: { '10': 'your value here', 此外，您需要确保存在具有 group 类的祖先元素，才能使 group-hover: 正常工作： tailwind.config = { theme: { extend: { scale: { 10: '0.1', }, }, }, }; <script src="https://cdn.tailwindcss.com/3.4.5"></script> <a href="foo" class="group"> <span class="group-hover:[&>img]:lg:scale-10 group [&>img]:transition [&>img]:duration-300 [&>img]:ease-in-out"> <img src="https://picsum.photos/200" /> </span> </a> 或者，如果您打算在 <span> 元素本身上激活悬停，则需要修改变体以根本不使用 group： tailwind.config = { theme: { extend: { scale: { 10: '0.1', }, }, }, }; <script src="https://cdn.tailwindcss.com/3.4.5"></script> <a href="foo"> <span class="[&>img]:hover:lg:scale-10 [&>img]:transition [&>img]:duration-300 [&>img]:ease-in-out"> <img src="https://picsum.photos/200" /> </span> </a>

tailwind-css css-transitions pseudo-element astrojs

回答 1 投票 0

如何仅在变换上应用转换：translateX()？

身体{ 高度：100vh；显示：柔性；调整内容：居中；对齐项目：居中； } div { 高度：50px；宽度：200px；背景：rgb(255,99,99)； } div：悬停{ 变换：翻译X(

html css google-chrome css-animations css-transitions

回答 3 投票 0

当我从一个媒体查询传递到另一个媒体查询时，我的垂直菜单会自动关闭。相反，我不会完全展示它

我正在实现一个汉堡菜单（代码中的菜单是本地文件，在代码片段中你不会看到它）并且它工作得很好。我正在使用 :checked 伪类和复选框输入元素来...

html css drop-down-menu media-queries css-transitions

回答 2 投票 0

为什么 css max-height 转换完成后会立即出现内部 HTML 内容？

使用 HTML 和 JavaScript 我试图创建一个列表，在单击按钮时转换到视图，包括可滚动的内部容器，在父 DIV 上使用最大高度转换。