时间戳

首页 > 解决方案 > 我应该使用 CSS 还是 JS 让我的容器向右滑动 + 同时淡入？

javascript - 我应该使用 CSS 还是 JS 让我的容器向右滑动 + 同时淡入？

问题描述

我正在处理这个小 UI，我现在正在对其应用一些动画，以便可以通过游戏中的按键激活它。我有两种我想要的动画，但我无法让它们同时工作。

我对 CSS 动画并不是很熟悉，如果我可以用后效来完成这一切，我会很花哨，但尽管如此。

我创建了这个图像来提供我正在寻找的内容的简要说明，并且我有一个带有滑出代码的 JSFiddle，另外我将包含一个淡入代码的片段。

我在寻找什么的简要说明： 在此处输入图像描述

这是滑出动画的 JSFiddle

这是自发布以来添加的 JSFiddle

下面是 FadeIn 动画的片段 

.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;
  }
  
<!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>

标签： javascriptjqueryhtmlcss

解决方案

您的问题非常广泛，但是我认为可以总结为两种方法：

  1. 使用类来描述元素的状态（例如中间或左边的圆圈）

  2. transform: translateX()与属性一起使用transition。

例如，在以下代码段中right，单击红色框会切换类：

const box = document.getElementById('box');

box.addEventListener('click', () => {
  box.classList.toggle('right');
});
#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;
}
<div id="container">
  <div id="box"></div>
</div>

您可以修改这个最小的示例并使用在对象的“状态”之间变化的属性：它们的width,opacity和 - 当然 - translate，如上所述。

推荐阅读