weixin_45840746 2022-12-27 13:13 采纳率: 36.4%
浏览 154
已结题

css3: animation多个元素平移

我在使用css3 animation时出现问题，想请教一下
现在有多个元素 点击按钮一个元素translate3d平移到屏幕中心，停留在最后状态，再次点击按钮这个元素回去，另一个元素同时平移。

  • 写回答

7条回答 默认 最新

  • zhu_xiaotong 2022-12-27 13:43
    关注

    你要的是这样的吗？

    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        /* 定义动画 */
        @keyframes moveToCenter {
            from {
                transform: translate3d(0, 0, 0);
            }

            to {
                transform: translate3d(50%, 50%, 0);
            }
        }

        @keyframes moveBack {
            from {
                transform: translate3d(50%, 50%, 0);
            }

            to {
                transform: translate3d(0, 0, 0);
            }
        }

        /* 应用动画 */
        .move-to-center {
            animation: moveToCenter 1s ease-in-out;
            animation-fill-mode: forwards;
        }

        .move-back {
            animation: moveBack 1s ease-in-out;
            animation-fill-mode: forwards;
        }
    </style>
    <body>
        <button class="" onclick="on()">点击</button>
        <div style="display: flex;">
            <div class="element1 box"></div>
            <div class="element2 box"></div>
        </div>
        
    </body>
    <script>
        const element1 = document.querySelector('.element1');
        const element2 = document.querySelector('.element2');

        // 点击按钮时启动/停止动画
        const button = document.querySelector('button');
        button.addEventListener('click', () => {
            if (element1.classList.contains('move-to-center')) {
                element1.classList.remove('move-to-center');
                element1.classList.add('move-back');
                element2.classList.add('move-to-center');
            } else {
                element1.classList.add('move-to-center');
                element1.classList.remove('move-back');
                element2.classList.remove('move-to-center');
            }
        });
        //监听move-back属性动画的最终位置，并赋值
        const element = document.querySelector('.move-back');
        element.addEventListener('animationend', () => {
          element.style.transform = 'translate3d(50%, 50%, 0)';
        });
    </script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题？

问题事件

  • 系统已结题 1月6日
  • 已采纳回答 12月29日
  • 创建了问题 12月27日

悬赏问题

  • ¥15 用土力学知识进行土坡稳定性分析与挡土墙设计
  • ¥70 PlayWright在Java上连接CDP关联本地Chrome启动失败,貌似是Windows端口转发问题
  • ¥15 帮我写一个c++工程
  • ¥30 Eclipse官网打不开，官网首页进不去，显示无法访问此页面，求解决方法
  • ¥15 关于smbclient 库的使用
  • ¥15 微信小程序协议怎么写
  • ¥15 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？