热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

有没有办法暂停中途的CSS过渡?-IsthereawaytopauseCSStransitionmid-way?

Actuallythesubjectisprettyexplanatory.Buttoclarify,Iamcuriousofseveralthings:实际上这个主题很

Actually the subject is pretty explanatory. But to clarify, I am curious of several things:

实际上这个主题很有说服力。但为了澄清,我很好奇几件事:

  1. Is there a way - not to disable - but to pause the property transition? (And then - resume it, perhaps).

    有没有办法 - 不是禁用 - 而是暂停属性转换? (然后 - 也许恢复它)。

  2. Is there a way to read property change (by Javascript) while it's in transition? For instance, will an $(el).height() return 50 after .5 seconds after the hover event, if the styles for el are: el { height: 100px; transition: height 1s; } and el:hover { height: 0px; } (it's a sketch, please pardon my syntax).

    有没有办法在转换过程中读取属性更改(通过Javascript)?例如,如果el的样式为:el {height:100px;那么$(el).height()将在悬停事件后0.5秒后返回50。过渡:高度1s;和el:hover {height:0px; (这是一个草图,请原谅我的语法)。

1 个解决方案

#1


2  

1) You can use the animation-play-state CSS attribute, and toggle between

1)您可以使用动画播放状态CSS属性,并在其间切换

animation-play-state:running, and animation-play-state:paused https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

动画播放状态:运行和动画播放状态:已暂停https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

2) The short answer is yes. Whichever property you read halfway through your transition (lets say height), will return the current value at the moment queried.

2)简短的回答是肯定的。无论您在转换过程中读到哪个属性(比如高度),都会在查询时返回当前值。


推荐阅读
author-avatar
翟厉害
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有