zoukankan      html  css  js  c++  java
  • animation-play-state 在 ios 中不生效的解决办法(JS篇)

    我们要实现动画的播放和暂停,animation-play-state 在安卓端可以使用,但是在 ios 中不起作用,这时可以使用 js 来实现相同效果。

    原理

    通过 js 获取当前元素的 transform 属性,通过添加、移除 class 实现 animation 动画。
    由于移除 animation 后,改变的效果会还原,所以给当前元素添加一个和当前元素同等大小的父元素,让父元素得到改变值。

    假设,我们要实现元素<div class="img"></div>的旋转,使用到了 transform 属性
    首先需要加一个wrap包裹,即

    <div class="wrap">
      <div class="img">&#10148</div>
    </div>

    随后写 CSS,通过添加 class 实现动画 

    @keyframes circle {
      100%{
        transform: rotate(360deg);
      }
    }
    
    .wrap,.img {
       50px;
      height: 50px;
    }  /*父元素和子元素同等大小*/
    
    .img {
      background: red;  /*便于观察*/
    }
    
    .playing {
      animation: circle 10s infinite linear;
    }

    最后,通过 JavaScript 实现效果,这里使用 jQuery

    let $img = $('.img')
    let isPlaying = false
    
    $img.on('click',function(){
      !isPlaying ? running() : paused()
    })
    
    function running(){
      $img.addClass('playing')
      isPlaying = true
    }
    
    function paused(){
      let siteImg = $img.css('transform')  //获取当前元素的动画改变,transform的值
      let siteWp = $('.wrap').css('transform')
      $('.wrap').css('transform',siteWp === 'none' ? siteImg : siteImg.concat('',siteWp))  
    //由于父元素没有动画,所以每次赋值的时候,需要将上次父元素的状态加上
      $img.removeClass('playing')
      isPlaying = false
    }
  • 相关阅读:
    LinQ Group By
    sql server 还原数据库后,删除用户,提示数据库主体在该数据库中拥有架构,无法删除解决方法
    各种网站资源
    Easyui TreeGrid数据源
    MVC中创建自定义视图的t4模板
    栈溢出练习
    Stack Canary
    攻防世界pwn之新手练习区
    开源 PetaPoco 扩展~一个小型轻巧的ORM~
    linux调度全景指南
  • 原文地址:https://www.cnblogs.com/smedas/p/12707205.html
Copyright © 2011-2022 走看看