cost 122 ms
高度:0; 溢出:隐藏; 不使用填充

[英]height: 0; overflow: hidden; not working with padding

我有这段代码,我的目标是使自定义 select 平滑 animation。我选择让我的高度默认为 0 溢出:隐藏,并将高度设置为自动 when.active 添加。 但是遇到了仍然显示身体的问题。 问题似乎与填充有关 .select-header { display: flex; justify-c ...

如何使用切换按钮使图像平滑过渡

[英]How to make image transition smoothly with toggle button

我使用 transition 来使更改变得平滑并且它正在工作,但是对于图像我无法设置好。 我怎样才能解决这个问题? 我试过这个:var lightsOff = document.querySelector("#lights-off"); var lightsOn = document.querySe ...

在 hover 从左到右,从左到右填充具有倾斜背景的元素

[英]Fill element with slanted background on hover left to right, left to right

有没有什么办法可以让这个 animation 也有倾斜的背景? 使用纯 css 还是反应 spring? Hover animation 我已经尝试了两种解决方案,但不是 em go 我诽谤背景 + 从左到右,从左到右 animation。 HTML: 我多么希望 slider 看起来像诽谤。 ...

before 元素的过渡效果

[英]Transition effect on before element

我正在尝试让“预约”按钮在这个网站https://templates.hibootstrap.com/arrola/default/index-2.html上工作。 我有以下 css 和 html 元素: <a className={styles.appointmentButton} href ...

为什么相同持续时间的转换需要不同的时间?

[英]Why do equal duration transitions take different amounts of time?

我有两个嵌套元素: A和B 。 外部元素A与内部元素B的大小相同。 元素B包含一些文本。 两个元素都有一个持续时间为一秒的 CSS 过渡。 在 hover 上, A更改了文本颜色,而B更改了背景颜色。 #A { color: red; transition: all 1s; } #B { fon ...

如何为下拉菜单添加滑下和滑上动画

[英]How to add slide-down and slide-up animations to dropdown menu

我的网站上有一个国际国家代码选择选项,为此我想实现平滑的向下滑动和向上滑动 animation 切换 function 到我的网站。 在我的例子中,上下两边都不起作用。 如果向下滑动比向上滑动不工作,如果向上滑动比向下滑动不工作。 这就是为什么我需要专家帮助来实现这个 animation 效果。 我 ...

背景图像 hover 效果问题 - 缩小对右边缘不起作用

[英]Problem with background-image hover effect - zoom out doesn't work for the right edge

你能不能看看这个? 我有这段代码: HTML: CSS: 代码笔:代码笔链接我希望这张图片在 hover 上变小。它正在工作,但仅适用于顶部、底部和左侧,但右侧保持不变(我的意思是它不会在右侧边缘的 hover 上更改其 position)。 您是否知道如何解决这个问题以及我做错了什么? 先感谢 ...

悬停后反转 CSS 转换

[英]Reversing CSS transition after unhover

我做了这个简单的 animation。但是当我“取消悬停”时,转换后的跨度就会“消失”。 有什么简单的方法可以将跨度向后滑动,又名。 取消悬停后反转过渡。 或者如果需要任何复杂的方式? 如果可能的话,如果解决方案只有 CSS 就好了。 提前致谢! #container { display: fle ...

React CSSTransition 两次创建新页面并在这两个相同的页面上运行转换

[英]React CSSTransition creates new page twice and runs the transtion on these two identical pages

我使用react-router和useNavigate在页面之间切换。 通过CSSTransition ,我想在页面之间进行平滑过渡。 不幸的是,它没有按预期工作,路由器立即删除当前页面并创建新页面两次,然后在这两个相同的页面上执行转换。 应用程序.jsimport "./styles.css"; ...

在图像上单击隐藏图像并显示带过渡的 div

[英]On image click hide the image and display a div with transition

我正在研究一个搜索栏。 首先,用户将只能看到搜索图标。 当用户单击搜索图标时,该搜索图标将被替换为包含新搜索栏的 div。 我希望当用户点击搜索图标时,新的 div 会以 1 秒的过渡时间出现,新的 div 看起来像是搜索图标的扩展版本。 ...

hover 上的下划线过渡会产生粗边框

[英]Underline transitions on hover give thick border

我正在尝试为我的菜单项创建下划线过渡。 我遵循了这篇文章的答案,但差别很小:在它用于设置边框的答案 css 上: a { text-decoration: none; display: inline-block; } a:after { content: ''; display: block; b ...

CSS 或 JavaScript 为 animation

[英]CSS or JavaScript for animation

我想更改我的代码,以便在我的布局更改时出现滑动 animation。 这是一个 3 列布局,我希望最左边的列缩小,但是当用户关注屏幕的右侧 2/3 时。 我写了一个简单的代码笔来演示我的代码。 我正在使用 JS 在两个 CSS 类之间进行转换,但我想为其添加一个滑动转换。 我不确定这是否应该是 1 ...

CSS 从右到左过渡

[英]CSS transition from right to left

我想将 CSS 应用于我的项目,并在以下链接中使用 animation 的转换。 在此示例中,过渡从左到右移动,但我想要从右到左的过渡。 任何解决方案都会有所帮助提前致谢。 ...

动态追加类时,CSS 转换无法正常工作

[英]CSS transition wont working properly when appending dynamically class

我为自己的主 div 写了一个 CSS: 当我自己的程序中的某些状态发生变化时,我会触发.visible CSS 类。 但它不起作用。 检查我的 React 部分: 除 CSS (.visible) 类外,所有东西都正常工作! 为什么以及如何安装它? 编辑 我将片段分成一些部分,但过渡仍然不起作用。 ...

如何在每个组件中具有“链接”的反应路由器中使用“CSSTransition”?

[英]How to use 'CSSTransition' in react-router that has 'Link' in each component?

我有一个包含“路由”的“CSSTransition”组件,但我不能在“链接”组件中放置一个更改“状态”的函数,因为每个组件都在不同的文件中在 routes.js 中 在每个组件中 StartPage.js 中未定义更改“CSStransition”状态的函数“setIsEnter()” ...

如何进行完全删除 div 的转换,而不仅仅是可见性?

[英]How does one make a transition for removing a div completely, not just visibility?

我如何做到这一点,以便当您将鼠标悬停时,原始 div 完全消失,而不仅仅是可见性,并且这样做有一个过渡,并且新的 div 在过渡完成之前不会出现? 使用 javascript 很好。 我知道使用 display 不允许转换,但这是我唯一能想到的并且很好地了解了我要完成的事情。 这是 HTML: 这 ...

如何在用户更改幻灯片后触发 CSS 动画?

[英]How to trigger CSS animation once user change the slide?

我正在为我的幻灯片内容使用Animate 。 我想在用户每次来回走动时应用 css 转换。 然而我的第一张幻灯片有我想要的转换,但问题是它们同时加载。 我需要某种 js 函数来在幻灯片切换之前调用转换。 ...


 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM