css-transitions 相关问题

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

如何使用从底部到顶部的持续时间为 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 目标：单击“每年”或“每月”时，白色背景会向新选择的选项方向过渡，并具有液体/挤压运动，因此感觉更

css tailwind-css css-animations css-transitions

回答 1 投票 0

CSS 网格每行第一项（选择每行第一项）

我有一个使用网格模板列自动填充的网格。即使网格是自动填充的，有没有办法选择每行的每个第一个元素。也就是说，我有以下 CSS：...

jquery css css-transitions css-grid css-transforms

回答 1 投票 0

如何在从映射数组渲染的 JSX 上添加过渡？

我有一个在用户界面中映射的项目数组：让 arr = [1, 2, 3, 4, 5, 6, 7...n] 假设我想将每个项目映射为 JSX 段落，但是，我希望能够更改每个元素的顺序...

javascript reactjs css-transitions

回答 1 投票 0

如何制作幻灯片动画 HTML CSS JS

我使用 HTML、CSS 和 JS 为我的页面创建了幻灯片。代码如下：索引.html 我使用 HTML、CSS 和 JS 为我的页面创建了幻灯片。代码如下： index.html <div class="slideshow"> <div class="image__container"> <img src="/static/images/indoor2.jpg" alt="Indoor"> </div> <div class="image__container"> <img src="/static/images/indoor3.jpg" alt="Indoor"> </div> <div class="image__container"> <img src="/static/images/indoor4.jpg" alt="Indoor"> </div> </div> 样式.css .slideshow { position: relative; animation: fadeInFromLeft 1.5s ease; } .image__container img { height: 80vh; width: 100%; border-radius: 10px; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2); } 脚本.js let slideIndex = 0; showSlides(); function showSlides() { const slides = document.getElementsByClassName('image__container'); // Hide all images for (let i = 0; i < slides.length; i++) { slides[i].style.display = 'none'; } // Show curr image slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } slides[slideIndex - 1].style.display = 'block'; // Repeat after 2 sec (2000ms) setTimeout(showSlides, 3000); } 幻灯片效果完美，但我想添加一些过渡，例如淡入。我试过这样：样式.css .slideshow { position: relative; animation: fadeInFromLeft 1.5s ease; } .image__container img { animation: fadeInSlideshow 1s ease-in-out; height: 80vh; width: 100%; border-radius: 10px; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2); } @keyframes fadeInSlideshow { from { opacity: 0.5; } to { opacity: 1; } } 但是，即使它有效，图像之间的过渡也不是最好的。在动画和过渡领域还不是很实用，我想知道是否有人可以给我一些如何继续的建议，以便了解将来如何解决这个“问题”。我感谢任何可以帮助我的回复。提前谢谢您。 let slideIndex = 0; showSlides(); function showSlides() { const slides = document.getElementsByClassName('image__container'); for (let i = 0; i < slides.length; i++) { slides[i].querySelector('img').classList.remove('active'); } // Show curr image slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } slides[slideIndex - 1].querySelector('img').classList.add('active'); // Repeat after 3 sec (3000ms) setTimeout(showSlides, 3000); } .slideshow { position: relative; animation: fadeInFromLeft 1.5s ease; } .image__container img { height: 80vh; width: 100%; border-radius: 10px; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 1s ease-in-out; } .image__container img.active { opacity: 1; } <div class="slideshow"> <div class="image__container"> <img src="https://avatars.githubusercontent.com/u/12371363?v=4" alt="Indoor"> </div> <div class="image__container"> <img src="https://avatars.githubusercontent.com/u/1493671?v=4" alt="Indoor"> </div> <div class="image__container"> <img src=https://avatars.githubusercontent.com/u/11975561?v=4" alt="Indoor"> </div> </div> 如果有效，请尝试一下。请在 HTML 中使用正确的图像 URL。我使用的是互联网资源。

javascript html css css-transitions slideshow

回答 1 投票 0

如何在 CSS 转换完成后调用函数 - React

我有一个带有卡片网格的 React 应用程序。我添加了一些 javascript 和 CSS 过渡来为卡片翻转设置动画。点击后，卡片会翻转到背面，等待2秒然后

javascript reactjs css-transitions settimeout

回答 1 投票 0

标题：Bootstrap Carousel - 具有独特高度过渡的居中卡片

说明：我正在开发一个 Bootstrap Carousel，它可以在中等屏幕上显示五张卡片。我想为居中的卡片实现独特的样式，其高度比其他卡片稍大。

css css-transitions carousel bootstrap-5

回答 0 投票 0

如何添加平滑的动画以从带有过渡的 Row 中删除元素之一？

我需要在侧边栏打开时显示文本和徽标，并且需要在侧边栏通过动画关闭时删除名称。我的反应组件渲染看起来像这样我需要在侧边栏打开时显示文本和徽标，并且需要在侧边栏以动画关闭时删除名称。我的反应组件渲染看起来像这样 <Row style={{ justifyContent: 'center', alignItems: 'center', overflow: 'hidden', flexWrap: 'nowrap' }}> <img src={Logo} width={32} /> <span style={{ fontFamily: 'Overpass', fontSize: 'x-large', fontWeight: '600', width: open ? 'auto' : '0px', transition: 'opacity 1s ease-in-out, width 1s ease-in-out, visibility 0.7s ease-in-out', opacity: open ? '1' : '0', visibility: open ? 'visible' : 'hidden', whiteSpace: 'nowrap' }}> Rigel </span> </Row> 但这会创建不稳定的动画，当动画开始时，徽标和文本位置会发生变化，甚至在折叠后徽标也不会在行中居中。请参考这个gif 似乎是因为它并没有脱离 DOM，只是隐藏了。如果我设置 display: none 那么徽标会居中，但我无法应用过渡。有什么更好的方法来解决这个问题？

javascript html css css-animations css-transitions

回答 0 投票 0

如何在 Chakra UI 上的按钮悬停时添加过渡持续时间？

我无法在悬停按钮时添加过渡持续时间。我无法在悬停按钮时添加过渡持续时间。 <Button bgGradient='linear(to-r, #003e9b, #5949b4, #ad53cc 80%)' color='white' _hover={{bg:'linear-gradient(to left,#003e9b ,#5949b4 ,#ad53cc 80%)', transitionDuration:'1s',}} > CONNECT WALLET TO BUY </Button> 我在互联网上没有找到任何答案。这对我有用。 <Button 　position="relative" 　bgGradient='linear(to-l, #003e9b, #5949b4, #ad53cc 80%)' 　overflow="hidden" 　_before={{ position: "absolute", content: `""`, width: "100%", height: "100%", bgGradient:'linear(to-r, #003e9b, #5949b4, #ad53cc 80%)', transition:'1s', 　}} 　_hover={{ _before: { opacity: 0 } 　}} > 　<Text zIndex="1" color={"white"}>CONNECT WALLET TO BUY</Text> </Button>

reactjs css-transitions mousehover chakra-ui

回答 1 投票 0

Vue3 Transition 不适用于 Route 内的 Router-Link

前几天我试图设置一个 vue-router 页面。基本思想是在每条路线上都有一个按钮可以转到另一条路线。我试着用简单的淡入淡出过渡来制作动画，而

vuejs3 css-transitions vue-router

回答 0 投票 0

Css - 在 scrollbar-thumb 伪元素中应用过渡

我想在将鼠标悬停在 div 中的 scroll-y 上时应用一个简单的过渡效果！当我将鼠标悬停在 ::-webkit-scrollbar-thumb 上时，会应用效果，除了过渡

html css css-animations css-transitions

回答 0 投票 0

下拉菜单的 CSS 转换在响应式菜单的移动/汉堡视图中不起作用

如果您最近从我这里读到类似的内容，我深表歉意，但我已经更改了很多代码并遇到了不同的问题，并且想重新开始而不是不断地重新编辑和