文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >我应该使用CSS或JS让我的容器同时滑到右边+淡入吗？

问我应该使用CSS或JS让我的容器同时滑到右边+淡入吗？
EN

Stack Overflow用户
提问于 2019-07-21 12:53:10
回答 1查看 106关注 0票数 0

我有一个小UI，我正在工作，我刚刚应用一些动画到它，以便它可以激活通过按键游戏。我得到了我想要的两种动画，我只是不能让他们一起工作，同时。

我对CSS动画不是很熟悉，如果我能用后效来做这一切，我会很棒，但无论如何。

我已经创建了这个图像来提供一个简短的解释，我正在寻找什么，我有一个JSFiddle与幻灯片代码，此外，我将包括一个淡入代码的片段。

对我正在寻找的东西的简要解释：

​

下面是幻灯片动画的JSFiddle

这是自发布后添加的JSFiddle

下面的是FadeIn动画的片段

代码语言：javascript
运行
复制
.positive {
    color: rgb(114, 204, 114);
}

.negative {
    color: rgb(224, 50, 50);
}

.tempbg {
    background-color: #3f3f3f;
}

.portrait {
    background-image: url("https://gdurl.com/VKq8");
    position: fixed;
    top: 34px;
    left: 560px;
    width: 120px;
    height: 120px;
    border-radius: 110px;
    z-index: 2;
    display: block;
    opacity: 1;
}

.container {
    background-color: rgba(0, 0, 0, 0.288);
    position: absolute;
    top: 50px;
    left: 660px;
    width: 260px;
    height: 85px;
    border-radius: 50px;
    border-bottom-left-radius: 0%;
    border-top-left-radius: 0%;
    z-index: 1;
}

/*#heal, #armor, #hunger, #thirst, #stamina, #voice {
    
}*/

#boxHeal, #boxArmor, #boxStamina, #boxHunger, #boxThirst, #boxVoice {
    width: 100%;
    height: 100%;
    transition: 0.2s ease-in-out;
}

#heal {
    position: absolute;
    left: 26px;
    bottom: 70px;
    width: 140px;
    height: 10px;
    padding: 0;
    float:left;
}

#armor {
    position: absolute;
    left: 27px;
    bottom: 54px;
    width: 140px;
    height: 10px;
}

#hunger {
    position: absolute;
    left: 62px;
    bottom: 28px;
    width: 113px;
    height: 10px;
}

.iconhunger {
    position: relative;
    left: -40px;
    bottom: 10px;
    z-index: 3;
    align-content: left;
 }

#thirst {
    position: absolute;
    left: 22px;
    bottom: 54px;
    width: 113px;
    height: 10px;
    padding: 0;
    float:left;
}

.iconthirst {
    position: relative;
    left: 0.5px;
    bottom: -29.5px;
    z-index: 3;
    align-content: left;
 }

#stamina {
    position: absolute;
    left: 62.5px;
    bottom: 1px;
    width: 113px;
    height: 10px;
    padding: 0;
    float:left;
}

.iconstamina {
    position: absolute;
    z-index: 3;
    align-content: left;
    left: -36px;
    bottom: -3px;
 }

#voice {
    position: absolute;
    left: 200px;
    bottom: -00px;
    width: 107.5px;
    height: 10px;
    padding: 0;
    float:left;
}

.fa-microphone {
    position: absolute;
    z-index: 3;
    left: 69px;
    bottom: 25px;
    color: #525151;
    font-size: 38px;
 }

.fa-microphonebg {
    position: absolute;
    top: 0px;
    left: 140px;
    width: 121px;
    height: 85px;
    background-image:
    radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 51px);
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    z-index: 2;
}

#boxHeal {
    background: rgb(97, 191, 92);
    border: solid 0.3px rgb(97, 191, 92);
    border-radius: 30px;
}

#boxArmor {
    background: rgb(96, 136, 220);
    border: solid 0.3px rgb(96, 136, 220);
    border-radius: 180px;
    border: -5px;
}

#boxHunger {
    background: rgb(255, 255, 255);
    position: absolute;
    left: -10px;
    bottom: 7px;
    border: solid 0.3px #ffffff;
    border-radius: 30px;
}

#boxThirst {
    background:rgb(255, 255, 255);
    position: absolute;
    left: 30px;
    bottom: -34px;
    border: solid 0.3px #ffffff;
    border-radius: 30px;

}

#boxStamina {
    background: rgb(255, 255, 255);
    position: absolute;
    left: -10px;
    bottom: 4px;
    border: solid 0.3px #ffffff;
    border-radius: 30px;
}

#boxVoice {
    background: rgb(180, 180, 180);
    position: absolute;
    z-index: 4;
    height: 27px;
    width: 14.1px;
    left: 215px;
    bottom: 36.5px;
    border-radius: 30px;
}

#boxVoice.active {
    background: rgb(46, 196, 66);
}

.position {
    font-family: "gta-ui", Verdana, Tahoma;
    font-size: 30px;
    position: absolute;
    bottom: 0.35%;
    left: 16%;
    text-shadow: -1px 1px 2px #000, 1px 1px 2px #000, 1px -1px 0 #000, -1px -1px 0 #000;
    color: #ffffff;
}

.seperator {
    color: rgb(224, 50, 50);
}

.seperator2 {
    color: rgb(240, 200, 80);
}

#slideout {
    position: fixed;
    top: 100px;
    left: -25px;
    animation-delay: : 2s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
  
#slideout_tab {
    position: relative;
    top: 0;
    left: 0;
}
  
#slideout_inner {
    position: absolute;
    top: -100px;
    left: 26px;
}
  
#showblock:not(:checked)+#slideout {
    left: -195px;
    opacity: 0;
    display: none;
}

#showblock:checked+#slideout {
    opacity: 1;
    display: block;
    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}
  
  #showblock {
    opacity: 1;
  }
代码语言：javascript
运行
复制
<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="utf-8"/>
        <title>SoL RP UI</title>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="https://icono-49d6.kxcdn.com/icono.min.css">
        <script src="https://kit.fontawesome.com/3f31cfc768.js"></script>
</head>

<body class="tempbg">
    <div class="portrait">
    </div>
    <input type="checkbox" id="showblock">
        <div id="slideout">

        <label id="slideout_tab" for="showblock" title="Admin Slider">
        </label>

        <div id="slideout_inner">
        <div class="container">

            <div id="heal">
                <div id="boxHeal"></div>
            </div>

            <div id="armor">
                <div id="boxArmor"></div>
            </div>

            <div id="hunger">
                <svg class="iconhunger" width="36" height="12" viewBox="0 0 14 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0)">
                        <path d="M9.44096 7.09788L12.0944 4.62314C13.9855 2.86906 14.0734 1.25095 13.9708 0.462298C13.9561 0.407908 13.9268 0.353518 13.8828 0.312725C13.7656 0.203945 13.5897 0.203945 13.4724 0.312725L12.6954 1.03339L2.94672 10.0893C2.62421 10.3885 2.62421 10.8916 2.94672 11.1907C3.26923 11.4899 3.81164 11.4899 4.13415 11.1907L4.33939 10.946C4.70588 10.4973 6.58232 7.98172 6.86086 7.58739C6.97813 7.42422 7.09541 7.32904 7.18337 7.28825C7.32997 7.23386 7.44724 7.30185 7.44724 7.30185C8.09227 7.65538 8.91321 7.58739 9.44096 7.09788Z" fill="white"/>
                        <path d="M4.95508 6.20047C5.49749 5.9965 5.86398 6.17327 6.09854 6.36364L6.86084 5.65657C6.65561 5.43901 6.46503 5.08547 6.68493 4.59596C6.99278 3.90249 7.242 3.45377 6.17184 2.37957C5.131 1.29176 3.4598 0.285548 2.68283 0.0679876C2.50692 0.027195 2.331 0 2.19906 0C2.1844 0 2.1844 0 2.16974 0C2.12577 0 2.09645 0.0135975 2.06713 0.0407925C1.99383 0.10878 1.99383 0.21756 2.06713 0.27195L4.70587 2.7195C4.83781 2.84188 4.83781 3.04584 4.70587 3.18182C4.57393 3.3042 4.35404 3.3042 4.20744 3.18182L3.89959 2.89627L3.21058 2.25719C2.69749 1.78127 2.36032 1.46853 2.03781 1.22378C1.26084 0.625486 0.95299 0.611888 0.95299 0.611888C0.95299 0.611888 0.835713 0.598291 0.733095 0.679876C0.645137 0.775058 0.659797 0.883838 0.659797 0.883838C0.659797 0.883838 0.674456 1.16939 1.33414 1.90365C1.59802 2.2028 1.93519 2.51554 2.44828 2.99145L3.13728 3.63054L3.44514 3.91608C3.57707 4.03846 3.57707 4.24242 3.44514 4.3784C3.3132 4.50078 3.0933 4.50078 2.94671 4.3784L0.307964 1.93085C0.234666 1.86286 0.117388 1.86286 0.0587496 1.93085C0.0294302 1.95804 0.0147705 1.98524 0.0147705 2.02603C0.0147705 2.02603 0.0147705 2.03963 0.0147705 2.05322C0.0147705 2.1756 0.0440899 2.33877 0.0880689 2.50194C0.307964 3.22261 1.40744 4.75913 2.58022 5.75175C3.73833 6.71717 4.20744 6.48601 4.95508 6.20047Z" fill="white"/>
                        <path d="M9.51434 7.737C9.1625 7.95456 8.73737 8.07694 8.29758 8.07694C8.03371 8.07694 7.78449 8.03614 7.53528 7.95456L10.6138 11.3539C11.0683 11.7619 11.7866 11.7619 12.2264 11.3539C12.6662 10.946 12.6662 10.2661 12.2264 9.85821L9.51434 7.737Z" fill="white"/>
                        </g>
                </svg> 
                <div id="boxHunger">                           
                </div>
            </div>

            <div id="thirst">
                <svg class="iconthirst" width="36" height="14" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.74196 0.100677C3.72525 0.0356591 3.65843 -0.013104 3.57491 0.00315034C3.52479 0.0194047 3.49138 0.0519134 3.47467 0.100677C2.9067 4.55437 0 5.46462 0 8.5692C0.0501155 10.5035 1.68722 12.0476 3.67514 11.9989C5.61294 11.9664 7.16652 10.4385 7.19993 8.5692C7.21663 5.48087 4.30993 4.55437 3.74196 0.100677ZM3.19069 5.02575C3.15728 5.15579 3.10716 5.30207 3.07375 5.44836C2.82317 6.34235 2.52248 7.35013 2.52248 8.52044C2.52248 9.15436 2.13826 9.38192 1.77075 9.38192C1.35312 9.38192 1.01902 9.05683 1.01902 8.65048C1.01902 7.26885 1.70393 6.35861 2.30531 5.56215C2.48907 5.31833 2.67283 5.07451 2.82317 4.84695C2.88999 4.74943 3.00693 4.73317 3.10716 4.79819C3.12387 4.81444 3.14057 4.8307 3.15728 4.84695C3.19069 4.89572 3.20739 4.96073 3.19069 5.02575Z" fill="white"/>
                </svg>
                <div id="boxThirst"></div>
            </div>

            <div id="stamina">
                <svg class="iconstamina" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="22px" height="22px" viewBox="0 0 487.811 487.81" style="enable-background:new 0 0 487.811 487.81;" xml:space="preserve">
                        <g>
                        <g>
                        <g id="_x33_6_24_">
                        <g>
                        <path d="M150.463,109.521h150.512c3.955,0,7.16-3.206,7.16-7.161c0-3.955-3.205-7.161-7.16-7.161H150.463     c-3.955,0-7.161,3.206-7.161,7.161C143.302,106.315,146.508,109.521,150.463,109.521z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
                        <path d="M15.853,179.537h150.511c3.955,0,7.161-3.206,7.161-7.161s-3.206-7.16-7.161-7.16H15.853     c-3.955,0-7.161,3.205-7.161,7.16S11.898,179.537,15.853,179.537z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
                        <path d="M56.258,253.214c0,3.955,3.206,7.162,7.161,7.162H213.93c3.955,0,7.161-3.207,7.161-7.162s-3.206-7.16-7.161-7.16H63.419     C59.464,246.054,56.258,249.259,56.258,253.214z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
                        <path d="M142.396,336.44H7.161C3.206,336.44,0,339.645,0,343.6s3.206,7.161,7.161,7.161h135.235c3.955,0,7.161-3.206,7.161-7.161     S146.351,336.44,142.396,336.44z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
                        <path d="M385.729,154.418c21.6,0,39.111-17.513,39.111-39.114s-17.512-39.113-39.111-39.113     c-21.605,0-39.119,17.513-39.119,39.113C346.609,136.905,364.123,154.418,385.729,154.418z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
                        <path d="M450.066,143.155c-22.459,31.459-52.533,35.102-84.895,15.89c-2.203-1.306-11.977-6.691-14.141-7.977     c-52.061-30.906-104.061-18.786-138.934,30.05c-14.819,20.771,19.455,40.459,34.108,19.93     c18.018-25.232,40.929-32.533,65.986-24.541c-12.83,22.27-24.047,44.405-39.875,75.853     c-15.832,31.448-50.787,56.562-84.374,36.92c-24.235-14.165-46.09,20.651-21.928,34.772     c45.854,26.799,99.619,10.343,127.066-24.493c0.952,0.509,1.958,0.968,3.062,1.354c22.422,7.812,51.814,28.61,60.77,35.981     c8.953,7.371,24.336,44.921,33.471,63.788c11.082,22.893,46.871,6.219,35.748-16.771c-10.355-21.406-27.736-64.129-41.293-74.938     c-10.875-8.669-31.988-24.803-49.895-33.956c12.115-23.466,24.729-46.679,38.008-69.491     c42.328,12.969,82.561-2.308,111.215-42.446C498.996,142.312,464.73,122.624,450.066,143.155z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
                        </g>
                        </g>
                        </g>
                        </g> 
                </svg>
                <div id="boxStamina"></div>
            </div>

            <div id="voice">
                    <div class="fa-microphonebg">
                    <i class="fas fa-microphone"></i>
                    </div>                
                    <div id="boxVoice"></div>
            </div>

        </div>   /*container*/
        </div>   /*slideout_inner*/
        </div>   /*slideout*/

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </script>

    <script src="js/app.js">
    </script>

</body>
</html>

​

javascript
jquery
html
css
EN

回答 1

Stack Overflow用户

发布于 2019-07-21 13:09:24

你的问题很广泛，但我认为可以归纳为两种方法：

  1. 使用类来描述元素的状态(例如中间的圆圈或左边的圆圈)
  2. 将transform: translateX()与transition属性一起使用。

例如，在下面的代码段中，right类在单击红色框时被切换：

​

代码语言：javascript
运行
复制
const box = document.getElementById('box');

box.addEventListener('click', () => {
  box.classList.toggle('right');
});
代码语言：javascript
运行
复制
#container {
  width: 80px;
  height: 40px;
  background-color: gray;
}

#box {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: red;
  margin: auto;
  transition: all 0.4s;
}

.right {
  transform: translateX(100%); /* When an element has the 'right' class, 
                                  it would move to the right by 100% */
  transition: all 0.4s;
}
代码语言：javascript
运行
复制
<div id="container">
  <div id="box"></div>
</div>

​

您可以修改这个最小的示例，并使用对象的“状态”之间不同的属性:它们的width、opacity和--当然还有-- translate，如前所述。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/57133416

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档