css-transitions 相关问题

如何使用从底部到顶部的持续时间为 0.3 秒的过渡来更改 a:hover 上的背景颜色？ &... 如何使用持续时间为 0.3 秒的从底部到顶部的过渡来更改 a:hover 上的背景颜色？ <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> 这可能吗？谢谢没有办法（一般）在 CSS 中应用过渡方向。但是，我们可以通过使用伪元素（或其他方法，例如此示例如何使用渐变）来解决该限制。通过使用伪元素，其最初的visible高度为0，我们可以在链接悬停时将高度从所需方向转换到所需方向。出于性能原因，最好使用 transform: scale，这意味着在这种情况下我们需要将 transform-origin 设置为 bottom center 以确保它从下到上。这种方法可能是最通用的，适用于非固体背景等，但确实需要伪元素或子元素。该方法的 CSS 是： li { background: red; } a { position: relative; z-index: 1; } a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; transform: scaleY(0); transform-origin: bottom center; background: blue; z-index: -1; transition: transform 0.3s; } a:hover::after { transform: scaleY(1); } 演示

css background css-transitions

回答 1 投票 0

如何使用 CSS 制作 HTML5 进度条动画？

当我们单击以下 HTML 元素时，其值更改为 200。但没有动画效果：进步 { 过渡：全 1 秒轻松； -webkit-transition：全部 1 秒轻松；

html css progress-bar css-transitions

回答 1 投票 0

继承时的转换行为

今天我发现嵌套元素使用inherit关键字时有趣的转换行为。如果没有继承，所有嵌套元素上的转换都会立即触发。而继承时

css google-chrome css-transitions chromium brave

回答 1 投票 0

为什么我的reactjs侧边栏转换代码不起作用？

我希望我的侧边栏作为滑块从上到下移动，我尝试了其他方法，如不透明度和变换，但我的代码仍然不起作用。杰士克斯我希望我的侧边栏作为滑块从上到下移动，我尝试了其他方法，例如不透明度和变换，但我的代码仍然不起作用。 Jsx <div className={`${style.options} ${isExpanded && style.expanded}`}> <ul className={style.category}> <li>Bags</li> <li>Shoes</li> <li>T-Shirts</li> </ul> </div> CSS :root { --primary_color: #50bed2; --dim_primary: rgba(80, 191, 210, 0.4); --dark_color: #202124; --light_color: #f9f9f9; --radius: 8px; --border: 1px solid rgba(0, 0, 0, 0.1); --padding_container: 1.5rem 4rem; --smooth: all 0.4s ease; } .options { display: none; position: absolute; top: 0; right: 0; transition: var(--smooth); } .options.expanded { display: flex; flex-direction: column-reverse; align-items: center; background-color: var(--light_color); border-left: var(--border); border-bottom: var(--border); padding: 1rem; transition: var(--smooth); top: 10.8rem; } 您可以保留列表的标准首选项并仅更改一些特定的属性。我认为你可以使用“可见性：;”隐藏和显示列表的 css 属性。检查此代码。 .options{ display: flex; flex-direction: column-reverse; align-items: center; background-color: var(--light_color); border-left: var(--border); border-bottom: var(--border); padding: 1rem; position: absolute; top: -100%; opacity: 0%; visibility: visible; transition: var(--smooth); } .options.expanded{ visibility: visible; opacity: 100%; top: 12px; } 如果您愿意，您可以调整一些属性。

css reactjs css-transitions transition sidebar

回答 1 投票 0

css 过渡不起作用，在添加标签之前它曾经起作用

此代码用于在线商店网站上的新用户注册页面，但是为什么当按下“继续”按钮时，转换不起作用在添加 l 之前它曾经有效...

css css-transitions

回答 1 投票 0

使用 Tailwind CSS 反应过渡组

我正在尝试使用、实现轮播我正在尝试使用 <TransitionGroup> 来实现轮播，<CSSTransition 附带 react-transition-group。我正在使用CSS框架Tailwind CSS。但是，在使用 <CSSTransition /> 时，我们必须导入 css。组件.js <TransitionGroup> {itemArray.map((item, idx) => ( <CSSTransition timeout={350} classNames={direction} key={Math.random() + idx}> <div className="relative mt-8 max-w-full inline-flex"> {item?.item} </div> </CSSTransition> ))} </TransitionGroup> 样式.css .right-enter{ /* style */ } .left-enter { /* style */ } 有没有什么方法可以使用 Tailwind CSS 处理 react-transition-group 的过渡，而无需导入 css。我尝试使用 <Transition> 实现相同的功能，但是如果类在生命周期中更新（onEnter，onEntered），它将抛出 too many re-renders 错误。您可以通过 React Transition Group 使用此方法： classNames={{ appear: 'your tailwindcss codes', appearActive: 'your tailwindcss codes', appearDone: 'your tailwindcss codes', enter: 'your tailwindcss codes', enterActive: 'your tailwindcss codes', enterDone: 'your tailwindcss codes', exit: 'your tailwindcss codes', exitActive: 'your tailwindcss codes', exitDone: 'your tailwindcss codes', }} 为了扩展@Saman 答案，这里有一个使用 TailwindCSS 类的外观/进入时的简单淡入和退出时的淡出： const classNames = { appear: "opacity-0", appearActive: "transition-opacity duration-300 opacity-100", enter: "opacity-0", enterActive: "transition-opacity duration-300 opacity-100", // exit: "opacity-100", // this breaks the exit transition exitActive: "transition-opacity duration-200 opacity-0", }; 我想就之前的回复提供一些补充说明。使用 React Transition Group 时，appear/enter/exit 和 appear/enter/exit-active 类都连接在一起。让我们考虑@Kuba 的例子：最初，元素的样式包括： "opacity-0" 然而，在指定的延迟之后，风格演变为： "opacity-0 transition-opacity duration-300 opacity-100"（注意opacity-两者都存在）。为了按预期过渡到功能，至关重要的是 opacity-100 被定义为 CSS 中的最终类。由于我们无法保证这一点，因此可以使用的替代方法是!important。完整代码： const classNames = { appear: "opacity-0", appearActive: "transition-opacity duration-300 !opacity-100", enter: "opacity-0", enterActive: "transition-opacity duration-300 !opacity-100", // exit: "opacity-100", // this breaks the exit transition exitActive: "transition-opacity duration-200 !opacity-0", };

css reactjs css-transitions tailwind-css react-transition-group

回答 3 投票 0

如何清除元素点击后的模糊，并在再次点击后再次模糊？

所以呃..我试图在点击div元素后对它进行“取消模糊”/模糊过渡，使用以下代码中的2个类名：取消模糊和模糊，这会清除模糊/蓝色。 ..

javascript jquery web css-transitions blur

回答 1 投票 0

使用 CSS 过渡

我在理解 CSS 转换时遇到了困难，即使我认为显而易见的应该有效，但事实并非如此。我想要完成的事情比这有点复杂，但是这个简单的例子......

css css-transitions

回答 1 投票 0

如何添加CSS动画来挤压方向的转变？

使用vue3、tailwind3 目标：单击“每年”或“每月”时，白色背景会向新选择的选项方向过渡，并具有液体/挤压运动，因此感觉更