Div 大小取决于文本，单击时角从左到右翻译

Question

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

正如您在这个 CodePen 上看到的那样：https://codepen.io/Rojiraan/pen/PJoMvr，一切都按我想要的方式工作，或者几乎。我唯一的问题是，如果我的文字比实际写的更长或更小，div 不会在他的左角位置正确返回，因此箭头不会完全水平对齐。

我认为在“.translate”上添加一个 "calc" class 或做一些 JQuery 公式可能会修复问题，但我真的不知道如何。

所以这是我的简单 css class 关注：

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

还有我完整的 JQuery 代码：

$(document).ready(function() {      

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

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

});

编辑

我忘记在我的 CodePen 中添加一些非常重要的东西，这是导致最初问题的原因。在我的真实页面中，这个 "aside" html 元素是在使用 "animation-delay: 1s;" 延迟 1 秒后出现的，所以 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 并添加一个新的 class :

而不是这个

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

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

这是一个说明一切的 CodePen：https://codepen.io/Rojiraan/pen/QqwjzJ

Answer 1

不要使用 translateX 动态值，而是使用全宽而不是添加左侧位置；

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

Div 大小取决于文本，单击时角从左到右翻译

Div size depending on text with corner left to right translation on click

html

css

jquery

text

translation

编辑