问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css如何保留动画执行后的样式？

头像
_XYZ
    492241167
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>

        <div class="container py-5 my-5">
            <button class="btn mb-3 btn-primary btn-in">In</button>
            <div class="position-relative">
                <div class="box box-in"></div>
            </div>
        </div>

        <div class="container py-5 my-5">
            <button class="btn mb-3 btn-danger btn-out">Out</button>
            <div class="position-relative">
                <div class="box box-out"></div>
            </div>
        </div>

        <style type="text/css">
            .box {
                width: 100px;
                height: 100px;
                position: absolute;
            }

            .box-in {
                background-color: blue;
                opacity: 0;
            }

            .box-out {
                background-color: red;
                opacity: 1;
            }

            .out {
                animation: out 1s;
            }

            .in {
                animation: in 1s;
            }

            @keyframes out {

                from {
                    left: 0px;
                }

                to {
                    left: 70px;
                    opacity: 0;
                }
            }

            @keyframes in {

                from {
                    left: -70px;
                }

                to {
                    left: 0px;
                    opacity: 1;
                }
            }
        </style>

        <script>
            $('.btn-out').click(function() {
                $('.box-out').addClass('out')
                setTimeout(function() {
                    $('.box-out').removeClass('out')
                }, 1000)
            })

            $('.btn-in').click(function() {
                $('.box-in').addClass('in')
                setTimeout(function() {
                    $('.box-in').removeClass('in')
                }, 1000)
            })
        </script>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
    </body>
</html>

    现在每次动画结束后，div都会回到原先的位置
    如何在动画结束后保留样式？ 如left: -70px;

    cssjavascript
    阅读 2.8k
    4 个回答
    得票最新
    头像
    himushroom
      1.5k1317
      ✓ 已被采纳

      你把动画的结束属性作为初始属性，这样动画结束后就会回到你最开始设置的属性上，点击demo查看，如果你是想一开始不显示，触发动画之后才停留在结束属性上，那就在js上在搞个变量判断下是否第一次点击

      你现在的问题是，你每次在动画结束的时候就会把animation这个动画移除掉，自然就不会保留动画中的属性了，你得先给box设置一个可以回来的初始值

      头像
      hfhan
        28.9k72241
        头像
        yzllee
          2.9k1324
          animation-fill-mode: forwards
          头像
          _XYZ
            492241167
            <style>
        @keyframes in {
            from {
                left: -70px;
                opacity: 0;
            }

            to {
                left: 0px;
                opacity: 1;
            }
        }

        @keyframes out {
            from {
                left: 0;
                opacity: 1;
            }

            to {
                left: 70px;
                opacity: 0;
            }
        }

        .animation-in,
        .animation-out {
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }

        .animation-in {
            animation-name: in;
        }

        .animation-out {
            animation-name: out;
        }

        .divider {
            height: 30vh;
        }
    </style>
            1. 设置动画属性 animation-fill-mode: forwards;
            2. 动画结束后, 不要删除最后一个关键帧对应的class属性
            <h1 class="container my-5">
  <span>基本的执行</span>
  <button class="btn clear rxc default green">样式还原</button>
  <hr>
</h1>

<div class="container">
  <button type="button" class="btn in rxc default blue mx-0">入场动画</button>
  <div class="content in bg-primary"></div>
</div>

<div class="container">
  <button type="button" class="btn out rxc default red mx-0">离场动画</button>
  <div class="content out bg-danger"></div>
</div>

            规定默认样式, 如显示离场之前的元素, 隐藏入场之前的元素

            #example1 .content {
  width: 100px;
  height: 100px;
  position: relative;
}

#example1 .content.in {
  opacity: 0;
  left: -70px;
}

#example1 .content.out {
  opacity: 1;
  left: 0;
}
            $('#example1 .btn.in').click(function() {
  $('#example1 .content.in').addClass('animation-in')
})

$('#example1 .btn.out').click(function() {
    $('#example1 .content.out').addClass('animation-out')
})

$('#example1 .btn.clear').click(function() {
  $('#example1 .content').removeClass('animation-in')
  $('#example1 .content').removeClass('animation-out')
})
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏