问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css下移动画该怎么实现呢？

头像
Codermin
    60829175230

    效果如图所示：

    clipboard.png

    clipboard.png

    点击的时候会显示一个框，这个框我用的是显示隐藏实现的，没有动画效果。现在产品要求点击的时候框要有下移动画，关闭的时候有上移动画。这个该怎么实现呀？

    csshtml5css3css3动画
    阅读 5.9k
    4 个回答
    得票最新
    头像
    CodeSteppe
      7.1k49
      ✓ 已被采纳
      头像
      流霜
        82319

        给框加一个高度，点击后高度由0变为100%的高度
        假设高度300，显示直接改变dispalay就行了

        @keyframes animateName {
  from {
    height: 0;
  }
  to {
    height: 300px;
  }
}
        头像
        stone
          2.3k1310

          写了个 demo ，希望对你有用。

          <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    html,
    body {
        margin: 0;
        padding: 0;
        background: #333;
    }

    .popup {
        width: 100%;
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        position: fixed;
        background: #fff;
        top: 50%;
        left: 50%;
        backface-visibility: hidden;
        transition: .2s ease-out;
        transform: translate3d(-50%, 100%, 0);
    }
    </style>
</head>

<body>
    <button>显示/隐藏</button>
    <div class="popup">嘻嘻嘻嘻嘻</div>
    <script>
    const button = document.querySelector('button'),
        popup = document.querySelector('.popup');
    let show = true
    button.addEventListener('click', function() {
        if (show) {
            popup.style.transform = 'translate3d(-50%, 0, 0)'
        } else {
            popup.style.transform = 'translate3d(-50%, 100%, 0)'
        }
        show = !show
    })
    </script>
</body>

</html>
          头像
          XboxYan
            18.2k93790

            如果对兼容性没什么要求的话，可以采用css的过渡

            .select{
    visibility:hidden;
    opacity:0;
    transform:translateY(-100px);
    transition:.3s;
}
/* 添加show出现，移除show隐藏 */
.select.show{
    visibility:visible;
    opacity:1;
    transform:translateY(0);
}

            注意，不能用display:none这些方式来隐藏，这样是不会有动画的。

            如果要兼容ie6+等老旧浏览器，你可以使用jquery来实现动画

            $('.select').slideDown();//向下展开显示
$('.select').slideUp();//向上收缩隐藏
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题