标签: css-transitions

在放大图像时使用转换似乎在chrome中不起作用.

HTML:

<img src="foobar.png">

CSS:

        img
        {
            float: left;
            margin-right: 10px;
            border-radius: 10px;
            width: 200px;
            -webkit-transition: width 1s ease, height 1s ease;
        }
        img:hover
        {
            width: 100%;
        }

小提琴:http://jsfiddle.net/6Dk4D/

怎么了？

我有一个盒子,在盘旋时会改变大小.但是,我想延迟鼠标输出阶段,以便在恢复旧尺寸之前,盒子保持新尺寸几秒钟.

div {
    width: 70px;
    -webkit-transition: .5s all;    
}

div:hover {
    width:130px;
}

这可能没有Javascript和CSS3吗？我只需要关心支持webkit.

我一直在研究一个使用CSS3过渡的幻灯片脚本,或者当它们不可用时使用jQuery的动画.我已经创建了一个自定义函数来执行幻灯片动画,这样做是恰当的.一切似乎都运转良好,但我在测试过程中遇到了一个重大障碍.

出于这样或那样的原因,在大型幻灯片上转换之前和之后应用jQuery CSS会有很大的延迟.例如,下面链接中的幻灯片显示大约9900像素宽(容器宽度,其中大部分是隐藏的).使用CSS3过渡和变换属性操纵容器以显示适当的幻灯片.延迟发生在下面的粘贴中的第75-82行之间应用CSS.特别是,应用"转换"CSS会导致问题.将"过渡"CSS添加到样式表(而不是将其应用于JS),并且延迟消失.然而,这并不是一个真正的解决方案,因为我们只想在特定属性上使用CSS3过渡,这可能会有所不同(在样式表中使用'all'会转换一些我们不想动画的CSS,但会定期更改).

动画功能:http: //pastebin.com/9wumQvrP

幻灯片演示:http://www.matthewruddy.com/demo/？ p = 2431

真正的问题在于iOS,其中幻灯片(有时甚至是浏览器)变得完全无法使用.我无法查明任何错误,并且确实已经耗尽了调试JS的知识.在玩了一下之后,我确定它与该功能的这一部分有关,并且在插件中禁用CSS3支持完全消除了这个问题.

我完全陷入困境,非常感谢任何人都可以给予的任何帮助.

---编辑---

我尝试使用原生Javascript而不是jQuery的.css函数来应用CSS.结果相同,没有更好的表现.另外值得注意的是,这在Firefox中根本不会发生,而且似乎只是Webkit浏览器的一个问题.

任何有解决方案的人都乐意为几瓶啤酒捐款!我真的想不出这个!

---第二次编辑---

好的,所以一直在调试,我可以看到减速是由浏览器重绘周期引起的,这需要很长时间.是否有更好的方法来处理它已经做的方式？绝对定位元素是减少重绘的一种已知方法,但由于幻灯片显示是响应的,因此这种方法并不真正有效.绝对定位幻灯片图像或幻灯片本身会导致它崩溃.

---第三次编辑---

一天后,我取得了一些进展.通过原始帖子中提到的自定义动画功能添加"内联CSS过渡"属性,从而为元素样式表CSS添加"过渡:所有0轻松".这会导致显着的性能提升,尤其是在转换本身完成时删除内联CSS转换属性时.

好东西!但是,现在在转换后删除内联CSS转换(用于创建硬件加速转换效果本身)并且正在应用左定位时,仍然存在减速.当两者一起发生时,就会出现放缓.

将它们分解为两个单独的任务(删除转换,然后在没有指定时间的情况下在setTimeout中添加左侧位置),再次摆脱重绘=性能增益,看起来好像问题已解决.但有时候,CSS过渡属性不会被足够快地否定,并且翻译删除会变得生动.没有好处,也不知道下一步在哪附近工作.

我有一个关于转换的CSS供应商前缀的问题.

该消息来源指出"你需要使用所有通常的前缀才能在所有浏览器中使用它(-o - , - webkit - , - moz - , - ms - )".

该页面只显示了-webkit-与-moz-前缀并且声称IE 10,FF 16+和Opera 12.1+可以阅读免费的前缀版本.

在Twitter的引导的代码,总有存在-webkit-,-moz-并且-o-除了未加前缀版本前缀版本.

我应该使用什么前缀？

我有以下CSS示例:

.message{
    background-color: red;
    transition: background-color 5s;
    -webkit-transition: background-color 5s; /* Safari */
    transition-delay: 2s;
    -webkit-transition-delay: 2s; /* Safari */
}

.unreadMessage{
    background-color: blue;
}

然后,我有一个DIV与.message类,并通过按下按钮,我添加类.unreadMessage,并通过按另一个按钮,我删除它.

在这个例子中,每次我改变background-color,通过添加或删除.unreadMessage,它都会进行CSS转换.

我想要做的是,如果可能的话,在我添加时立即进行颜色更改.unreadMessage,并且仅在删除它时才进行转换.

我想到的第一件事就是拥有一个包含CSS过渡属性的不同类,并在添加后添加它.unreadMessage.

但是可以只使用一个类,或使用Javascript解决方法吗？

在我的close函数中,我希望在css转换完成后运行我所有的DOM清理工作.但可能没有任何转换运行/可能是多阶段转换 - (维护样式表不在我的手中).

我将如何编写类似以下的函数

function close () {
  myEl.removeClass('open');
  if (animation is running/about to be run) {
    // wait for transition to end, then recursively check to see if another 
    // one has started, wait for that ...
    // then
    cleanUpDOM(); 
  } else {
    cleanUpDOM(); 
  }
}

到目前为止,我的想法是将初始检查包装在timeout/requestAnimationFrame中,以便为动画提供启动机会,然后检查它是否正在运行.不幸的是,没有transitionstart事件,我不知道如何检查转换是否已经开始.

编辑答案推荐jquery是无关紧要的,因为jquery动画是javascript动画,而不是CSS过渡

我有一个页脚/行的SVG,但它们在第1和第2部分之间的过渡期间无法动画.代码调试起来并不简单,因为这需要使用控制几个元素大小的js进行动画处理.许多勇敢的用户已经提出了可在Chrome和Firefox中运行的解决方案,但为了获得信誉,该解决方案也必须在Safari中运行.

我已经验证了我在transition(.fixed)期间添加的类确实已应用,因为它们是我使用的更改SVG的大小.因此,当SVG改变大小时,由于某种原因,我仍然无法将CSS转换为动画.您可以在下面的GIF中查看此失败动画.

页脚没有动画:

我认为需要转换代码的元素是SVG本身,它们是类areaSVG,因为它们是从更改max-height: 18vh到的那些max-height: 9vh.但是,当我添加一些动画代码时.areaSVG,它不起作用,所以也许我是错误.这是我尝试添加到.areaSVG失败的初始SVG()设置的转换代码:

  -webkit-transition: max-height 1s;
  -moz-transition: max-height 1s;
   transition: max-height 1s;

几个月前,在另一个经验更丰富的编码器的帮助下,我添加了一个javscript函数,在某些时候动画了SVG.我们使用JS来调用window.requestAnimationFrame(startAnimation),但它不再有效.我评论了与此相关的部分,但是如果您认为需要JS才能使其生成动画,请随意分叉代码笔并使用它.一个合适的答案应该使动画在Safari,Chrome和Firefox中运行.

Codepens

• 这是您应该解决的最简单,最小化的版本,因为它没有媒体查询(请求@Eric N:http://codepen.io/ihatecoding/pen/LREOPW

• 这是完整的codepen,有媒体查询:http://codepen.io/ihatecoding/pen/ALjKKz

选择

第一部分的选择器(在页面顶部):

• 整个页脚: #indexFooter
• SVG家长: .ey-col-svg
• SVG本身: .areaSVG

第二部分的选择器(向下滚动100px后):

• 整个固定页脚: #indexFooter.fixed
• 固定的SVG父母: .ey-col-svg.fixed
• 固定的SVG本身: .areaSVG.fixed

注意:当页面首次加载时,SVG parent(.ey-col-svg)和SVG本身(.areaSVG)都是不可见的,并且具有display:none避免用户奇怪体验的设置.

以下是有关每个部分中重要元素的信息:

大页脚(第一部分)

初始CSS(第一部分)

  /* The whole footer container */
  #indexFooter …

我有一个图像,当我在悬停时模糊它,它稍微移动,就像图像在它的位置抖动,问题只发生在chrome(测试时使用:chromium 63 linux-x86_64),

.item img{
  transition: 250ms all ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.item:hover img{
  filter: blur(2px)
}

我认为它可能与这个问题有关,但没有一个解决方案有效.

更新:

正如@Chase所说,这是一个chrome bug,最稳定的解决方案是等待它被修复.但就目前而言,这个问题的最佳解决方案是@kosh Very的答案

这就是我所拥有的:

.box{
    background:#FFF;
    -webkit-transition: background 0.5s;
}

.box:hover{
    background:#000;
}

但这既适用于onmouseover,也适用于onmouseout行动,但是没有办法控制它们吗？就像是:

-wekbkit-transition-IN: background 1s;
-webkit-transition-OUT: background 10s;

我已经在Angular中创建了一个布局管理器,它可以接收组件,然后在视图中显示它,并在视图中显示每个组件时将动画添加到视图中.

在单个时刻,可以在视图中显示一个面板或最多两个面板.

这是Stackblitz link同样的问题,这是过渡不平滑,它也显示为流线型,因为它应该是设计如下.

现在我想要实现的是当应用程序加载1-2时默认显示但是当我更改面板时,转换会像

1-3当2移动到视野之外它应该向左滑动和缓和而且3应该进入并且缓和.然后,如果从1-3开始我们进入2-3 1应该向右缓和,2应该滑入.

此外,面板可以占屏幕宽度的一些百分比(33%,66%或100%).

我不确定我是否能够正确地解释它我已经被困在这几个星期过渡如果有人可以帮助它会很棒,谢谢

感谢萨达姆帮助创建了这个动画,这正是我想要的动画 - https://imgur.com/a/qZ3vtDb这仅用于视觉目的