Jquery Div大小取决于单击时从左到右转换的文本

我在尝试实现div翻译时遇到了问题

正如您在这个代码笔上所看到的，一切都按照我的要求工作，或者几乎可以。 我唯一的问题是，如果我的文本比实际写入的文本长或小，div就不能正确返回到它的左角位置，因此箭头没有完全水平对齐

我认为在“.translate”类上添加一个“calc”或执行一些JQuery公式可能会修复这个问题，但我不知道如何解决

下面是我的简单css类：

.translate
{
transform: translateX(-89%);
}

以及我的完整JQuery代码：

$(document).ready(function() {      

$('.arrow').click(function(){  
      $('aside').toggleClass('translate');

      //Just for rotating the arrow when clicking
      $('.arrow').toggleClass('rotate');
  });

});

---

编辑 我忘了在我的代码笔中添加一些非常重要的东西，这导致了最初的问题。在我的真实页面中，这个“aside”html元素是在使用“animation delay:1s；”延迟1s后出现的，因此CSS aside元素实际上是这样的：

aside
{
    position: fixed;
    padding-left: 25px;
    padding-right: 45px;
    height: 54px;
    background-color: #ff8686;
    left: -1500px;

    color: white;
    font: 22px Roboto;

    justify-content: center;
    align-items: center;
    display: inline-flex;

    transition: 0.5s;
    animation-name: asideelement;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

@keyframes asideelement
{
    from {left:-1500px;}
    to {left:0px;}
}

所以加上

.translate
{
    transform: translateX(-100%);
    left: 45px;
}

…也有问题，因为“@keyframes”似乎比其他代码更重要。我尝试添加“left:45px！important”，这在Firefox中可以正常工作（有点抖动），但在Chrome中不行。 因此，最后，我决定使用完整的JQuery并添加一个新类，而不是这样：

//JQuery code added :
setTimeout(function(){
    $('aside').toggleClass('apparitionAside');
}, 1000);

/* CSS code added : */
.apparitionAside
{
    left: 0px;
}

---

这是一个代码笔，说明了一切：

不要选择translateX动态值，而是选择全宽，然后添加一个左位置

.translate {
    transform: translateX(-100%);
    left: 45px;
}

---

@银鱼冲浪者不…不太可能，所以这很容易，非常感谢！；-）