问题标签 [css-transitions]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
image - 悬停时背景图像之间的 CSS 淡入淡出
有没有办法可以做到以下几点?
我有一个透明的 png 精灵,左侧显示标准图片,右侧显示 :hover 状态的图片。
有没有一种方法可以让图像在 :hover 上仅使用 css3 转换从左图像淡入右图像?我尝试了以下方法,但它不起作用:
现在,上面确实为背景设置了动画,它平移了图像。我想要代替平底锅的是淡入淡出或溶解效果。
更新:我最终不得不创建两个元素并分别为不透明度设置动画。这有点混乱,因为我必须指定每个元素的确切边距,但我想它会起作用。感谢大家的帮助:)
jquery - CSS3 动画和更新 DOM
我是 CSS3 转换的新手,想知道这是否可能。
假设我有一个 div,里面有 2 个子 div,如下所示:
我的目标是,当我在苹果和橙色 div 之间添加一个新 div 时,我希望它动画两个 div 滑动分开并且新 div 会进入。
我不太关心如何进行 CSS3 转换,但我的问题是,如果在 dom 中替换整个容器 div,这是否可能。
因此,由于我们的设计,我们的 AJAX 响应不会只回复容器中的新 div。相反,它再次返回整个 div 容器,但包括中心的新 div,例如:
当动画元素被替换时,是否可以为这样的动画制作动画?这更像是一个 jQuery 任务吗?
jquery - 使用modernizr检测CSS转换支持
我将使用 css 转换和 jquery 插件作为不支持它的浏览器的后备。我想使用modernizr 来检测css 转换支持。为此加载整个库是矫枉过正的,我只想抓住我需要检测css转换的代码部分。在modernizr 的下载页面中,有很多让我感到困惑的选项和附加功能。我的问题是我应该选择哪些选项来有效地检测 css 转换?
javascript - CSS3 过渡 Polyfill
好的,所以你们中的大多数人都会熟悉 CSS3 过渡,我更喜欢它而不是 jQuery 动画,因为它具有 CSS 的简单性。我唯一的遗憾是它不适用于 IE < 9(一如既往)以及 Firefox < 4、Safari < 4 等。我并不是说只为 IE 用 JavaScript 编写单独的动画。但是我想要一个解决方案,它可以扫描 CSS,获取动画的速度,必须为哪些属性设置动画,并为它们设置动画(使用 jQuery 或其他东西),如果有这样的解决方案,它是什么,在哪里可以我得到它?
css - CSS 过渡和 CSS 动画的用例
据我了解,没有这样的事情我们可以使用 css 过渡来实现,但我们不能使用 css 动画来实现,反之亦然。
也就是说,任何过渡都具有等效的 css 动画。比如这个
相当于以下内容:
我的问题是 - 如果我们谈论支持 CSS 转换和动画的浏览器,选择一种或另一种方法的用例是什么?至于过渡,我只能举出一个——它们的语法更简洁,我们不必为@-moz-keyframes、@-webkit-keyframes 等复制粘贴大量代码。
至于来自 javascript 的控制,灵活性和复杂性动画是更合适的工具(至少,乍一看)。那么,什么是用例?
UPD: 好的,让我尝试列出问题中发现的有趣信息。
- 这是由 Roman Komarov 提供的。比如说,我们有一个 div 和一个子 div。当父 div 悬停时,我们正在转换子元素。一旦我们拿走鼠标,过渡就会被取消。取消的持续时间正是我们已经花费在过渡上的时间。动画“立即”取消。不过,我不知道这两种行为有多标准。
google-chrome - 带有 a:visited 的奇怪 css3 转换行为
我刚刚在 Google Chrome 中a:hover
发现了一个奇怪的 CSS3 转换问题。a:visited
(演示) 链接应该有橙色背景,访问后它应该是蓝色的。当您将鼠标悬停在上方时,链接应该会变宽。但是,当您在访问后将鼠标悬停在上方时,链接会在过渡期间变为橙色,然后又变为蓝色。我希望它在过渡期间保持蓝色,因为,链接仍然是:visited
,对吗?
任何帮助、建议或任何事情都将不胜感激!(请不要使用 jQuery - 仅限 CSS)
animation - 如何在一个元素上有多个 CSS 过渡?
这是一个非常简单的问题,但我找不到关于 CSS 过渡属性的非常好的文档。这是CSS片段:
如您所见,过渡属性正在相互覆盖。就目前而言,文本阴影将动画,但不是颜色。我如何让它们同时制作动画?感谢您的任何回答。
jquery - CSS 过渡未触发
我正在创建一个 DOM 元素(一个 div),将其添加到 DOM,然后在 javascript 中一键更改其宽度。这在理论上应该触发 CSS3 过渡,但结果是直接从 A 到 B,中间没有过渡。
如果我通过单独的测试点击事件改变宽度,一切都会按预期工作。
这是我的 JS 和 CSS:
JS(jQuery):
CSS(只是 Mozilla 一分钟):
我在这里搞砸了,还是“一击即中”不是应该做的事情?
非常感谢所有帮助。
css - 移动 WebKit 中的 CSS3 过渡转换
我在 CSS3 中的一个元素上有一个过渡变换,但是每当我运行动画时,似乎动画中涉及的元素之一在动画期间总是隐藏起来。
下面是 CSS、HTML 和 JavaScript 代码:
CSS
JavaScript:
本质上,动画将整个移动div.control-con
或向后移动,具体取决于复选框的状态。在 Chrome 和 Safari 中一切正常,但在 Mobile Safari 中运行时,由于某种原因,动画运行时不会显示span.off
和span.on
元素。
隐藏哪个 span 元素取决于动画的方向。这是问题的屏幕截图,您会注意到span.off
在动画完成之前不会显示:
我也把它放到了一个 jsFiddle 中供参考:http: //jsfiddle.net/kShEQ/
jquery - 如何在 jQuery 中使用 transitionend?
我需要在允许函数再次重复之前检测 CSS 转换是否完成,以防止弄乱边距。
所以我怎么会有类似的东西