使用多层div实现同时修改transform不同属性导致的冲突问题

原创
10/23 23:13
阅读数 15

每一个div都对应一个变化讲道理, 应该嵌套六个div对应矩阵中的六个数值

每个变换都加在对应的div上, 这样就能解决同时修改不同属性的问题

但是如果同时修改相同的属性, 也会有问题, 但相比于增量矩阵来说这种处理相对简单, 一般嵌套两层已经足够解决大部分的问题了

 

对于这种需要在不同组件中需要使用相同的功能的场景, 最好能够使用一个全局的调度方式

比如音视频的播放, 动画的执行, 比如在a音频播放时需要暂停所以正在播放的音频, 或者需要将a音频的声音减小, 或者减少其他正在播放的音频声音

这种情况下有一个全局调度会更加方便一些

 

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="../../../node_modules/animejs/lib/anime.min.js"></script>
    <style>
      .wrap {
        width: fit-content;
        height: fit-content;
        height: auto;
      }
      .wrap-move-x {
        border: 4px solid red;
      }
      .wrap-move-y {
        border: 4px solid teal;
      }
      .wrap-scale {
        border: 4px solid blue;
      }
      .wrap-rotate {
        border: 4px solid green;
      }
      .box {
        width: 100px;
        height: 100px;
        background: deepskyblue;
      }
    </style>
  </head>
  <body>
    <button onclick="rotate()">rotate</button>
    <button onclick="scale()">scale</button>
    <button onclick="moveX()">moveX</button>
    <button onclick="moveY()">moveY</button>
    <div class="wrap wrap-move-x" id="wrap-move-x">
      <div class="wrap wrap-move-y" id="wrap-move-y">
        <div class="wrap wrap-scale" id="wrap-scale">
          <div class="wrap wrap-rotate" id="wrap-rotate">
            <div class="box"></div>
          </div>
        </div>
      </div>
    </div>
    <script>
      const moveWrapX = document.getElementById("wrap-move-x")
      const moveWrapY = document.getElementById("wrap-move-y")
      const scaleWrap = document.getElementById("wrap-scale")
      const rotateWrap = document.getElementById("wrap-rotate")
      const box = document.getElementById("box")
      const config = {
        duration: 5000,
        easing: "linear",
      }
      const scale = () => {
        anime({
          ...config,
          targets: scaleWrap,
          scale: [0, 2],
        })
      }
      const rotate = () => {
        anime({
          ...config,
          targets: rotateWrap,
          rotateZ: ["0deg", "360deg"],
        })
      }
      const moveX = () => {
        anime({
          ...config,
          targets: moveWrapX,
          translateX: [0, 200],
        })
      }
      const moveY = () => {
        anime({
          ...config,
          targets: moveWrapY,
          translateY: [0, 200],
        })
      }
    </script>
  </body>
</html>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部