
[英]height: 0; overflow: hidden; not working with padding
我有这段代码,我的目标是使自定义 select 平滑 animation。我选择让我的高度默认为 0 溢出:隐藏,并将高度设置为自动 when.active 添加。 但是遇到了仍然显示身体的问题。 问题似乎与填充有关 .select-header { display: flex; justify-c ...
[英]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 ...
[英]Fill element with slanted background on hover left to right, left to right
有没有什么办法可以让这个 animation 也有倾斜的背景? 使用纯 css 还是反应 spring? Hover animation 我已经尝试了两种解决方案,但不是 em go 我诽谤背景 + 从左到右,从左到右 animation。 HTML: 我多么希望 slider 看起来像诽谤。 ...
[英]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 ...
[英]Vue 2 <transition mode=out-in> not transitioning the first element
使用 Vue 2.6.14,我使用 v-if 和 v-else 在两个按钮之间切换。 我将所有内容都包装在一个过渡中,但第一个元素从不过渡,既不进也不出。<transition name="fade" mode="out-in"> <TappaPaginazione v-if= ...
[英]How to add slide-down and slide-up animations to dropdown menu
我的网站上有一个国际国家代码选择选项,为此我想实现平滑的向下滑动和向上滑动 animation 切换 function 到我的网站。 在我的例子中,上下两边都不起作用。 如果向下滑动比向上滑动不工作,如果向上滑动比向下滑动不工作。 这就是为什么我需要专家帮助来实现这个 animation 效果。 我 ...
[英]Problem with background-image hover effect - zoom out doesn't work for the right edge
你能不能看看这个? 我有这段代码: HTML: CSS: 代码笔:代码笔链接我希望这张图片在 hover 上变小。它正在工作,但仅适用于顶部、底部和左侧,但右侧保持不变(我的意思是它不会在右侧边缘的 hover 上更改其 position)。 您是否知道如何解决这个问题以及我做错了什么? 先感谢 ...
[英]Reversing CSS transition after unhover
我做了这个简单的 animation。但是当我“取消悬停”时,转换后的跨度就会“消失”。 有什么简单的方法可以将跨度向后滑动,又名。 取消悬停后反转过渡。 或者如果需要任何复杂的方式? 如果可能的话,如果解决方案只有 CSS 就好了。 提前致谢! #container { display: fle ...
[英]React CSSTransition creates new page twice and runs the transtion on these two identical pages
我使用react-router和useNavigate在页面之间切换。 通过CSSTransition ,我想在页面之间进行平滑过渡。 不幸的是,它没有按预期工作,路由器立即删除当前页面并创建新页面两次,然后在这两个相同的页面上执行转换。 应用程序.jsimport "./styles.css"; ...
[英]How can I make a transition from left to right?
我希望我的按钮通过从左到右的过渡来更改 hover 上的背景颜色。 这是我试过的: ...
[英]On image click hide the image and display a div with transition
我正在研究一个搜索栏。 首先,用户将只能看到搜索图标。 当用户单击搜索图标时,该搜索图标将被替换为包含新搜索栏的 div。 我希望当用户点击搜索图标时,新的 div 会以 1 秒的过渡时间出现,新的 div 看起来像是搜索图标的扩展版本。 ...
[英]Underline transitions on hover give thick border
我正在尝试为我的菜单项创建下划线过渡。 我遵循了这篇文章的答案,但差别很小:在它用于设置边框的答案 css 上: a { text-decoration: none; display: inline-block; } a:after { content: ''; display: block; b ...
[英]CSS or JavaScript for animation
我想更改我的代码,以便在我的布局更改时出现滑动 animation。 这是一个 3 列布局,我希望最左边的列缩小,但是当用户关注屏幕的右侧 2/3 时。 我写了一个简单的代码笔来演示我的代码。 我正在使用 JS 在两个 CSS 类之间进行转换,但我想为其添加一个滑动转换。 我不确定这是否应该是 1 ...
[英]CSS transition from right to left
我想将 CSS 应用于我的项目,并在以下链接中使用 animation 的转换。 在此示例中,过渡从左到右移动,但我想要从右到左的过渡。 任何解决方案都会有所帮助提前致谢。 ...
[英]CSS transition wont working properly when appending dynamically class
我为自己的主 div 写了一个 CSS: 当我自己的程序中的某些状态发生变化时,我会触发.visible CSS 类。 但它不起作用。 检查我的 React 部分: 除 CSS (.visible) 类外,所有东西都正常工作! 为什么以及如何安装它? 编辑 我将片段分成一些部分,但过渡仍然不起作用。 ...
[英]How to create a square box in which the border of the box will be filled by color depending on the value given on the box?
就像上面的图片或实现此设计的想法或参考,我感谢社区提供的帮助或建议谢谢我得到了进度条的参考,它是圆形的但找不到解决它的方法。 ...
[英]How to use 'CSSTransition' in react-router that has 'Link' in each component?
我有一个包含“路由”的“CSSTransition”组件,但我不能在“链接”组件中放置一个更改“状态”的函数,因为每个组件都在不同的文件中在 routes.js 中 在每个组件中 StartPage.js 中未定义更改“CSStransition”状态的函数“setIsEnter()” ...
[英]How does one make a transition for removing a div completely, not just visibility?
我如何做到这一点,以便当您将鼠标悬停时,原始 div 完全消失,而不仅仅是可见性,并且这样做有一个过渡,并且新的 div 在过渡完成之前不会出现? 使用 javascript 很好。 我知道使用 display 不允许转换,但这是我唯一能想到的并且很好地了解了我要完成的事情。 这是 HTML: 这 ...
[英]How to trigger CSS animation once user change the slide?
我正在为我的幻灯片内容使用Animate 。 我想在用户每次来回走动时应用 css 转换。 然而我的第一张幻灯片有我想要的转换,但问题是它们同时加载。 我需要某种 js 函数来在幻灯片切换之前调用转换。 ...