ios 中使用 animation-play-state: paused 属性失效的问题
时间:2020-04-15
本文章向大家介绍ios 中使用 animation-play-state: paused 属性失效的问题,主要包括ios 中使用 animation-play-state: paused 属性失效的问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
因为要做一个播放器的播放图片旋转动画,像这样子
当音乐播放就转动,停止就暂停。
开始
于是很自然地想到了使用Css3的 animation 动画属性
CSS3 animation(动画) 属性
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
刚开始我是这样写的
<img v-if="playerInfo.singerPic" :src="playerInfo.singerPic" :class="[ 'play_photo', { rotate_animation: isPlayBarShow }, { animation_paused: !isPlaying }, { animation_play: isPlaying } ]"/>
@keyframes rotate_img { 0% { transform: translate(-50%, -50%) scale(0.9) rotate(0deg); } 100% { transform: translate(-50%, -50%) scale(0.9) rotate(360deg); } } .rotate_animation { animation: rotate_img 10s linear infinite; } .animation_paused { animation-play-state: paused; } .animation_play { animation-play-state: running; } .play_photo { position: absolute; top: 50%; left: 50%; z-index: -1; }
问题
在 chrome 里调试没有任何问题,但是真机测试时,出现bug:
IOS 浏览器中音乐点击暂停,动画直接消失,图片跟没有添加 animation 一样, 直接现出原形,再点播放,动画从刚刚停止的位置继续。这样的体验很不好。
android 正常。
分析解决
刚开始我怀疑 IOS 系统是不是不支持 animation-play-state: paused 这个属性,但是查阅了一番资料之后,又重新修改了一下代码,主要是 Css,如下:
@keyframes rotate_img { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .rotate_animation { animation: rotate_img 10s linear infinite normal both; } .animation_paused { animation-play-state: paused; } .animation_play { animation-play-state: running; } .play_photo { width: 0.7rem; height: 0.7rem; border-radius: 50%; position: absolute; top: calc(50% - 0.35rem); left: calc(50% - 0.35rem); z-index: -1; }
原文地址:https://www.cnblogs.com/smedas/p/12707160.html
- 唐良:云端架构给电商行业带来创新力
- 邹方明:看腾讯云如何架构海量存储系统
- 王之捷:AI智能云端架构大幅提升智能语音识别能力
- 精彩大放送 | 腾讯云:容器架构向无服务架构的演进
- Python 数据分析学习笔记
- 如何用Fiddler抓取https
- 人工智能与大数据结合,帮助降低自杀率
- “多态”的数据库连接池实现
- ASP.NET MVC基于标注特性的Model验证:DataAnnotationsModelValidatorProvider
- 用js代码理解区块链,最简版本
- 谈谈IE针对Ajax请求结果的缓存
- Ajax请求过程中显示“进度”的简单实现
- ASP.NET MVC基于标注特性的Model验证:ValidationAttribute
- 【深度学习系列】卷积神经网络详解(二)——自己手写一个卷积神经网络
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释