jquery - Div 大小取决于单击时从左到右翻译 Angular 的文本

Question

我在尝试实现 div 转换时遇到问题。

正如您在这个 CodePen 上看到的:https://codepen.io/Rojiraan/pen/PJoMvr ，一切都按我的意愿工作，或者几乎。 我唯一的问题是，如果我的文本比实际写入的文本长或短，则 div 不会在其左 Angular 位置正确返回，因此箭头不会完全水平对齐。

我认为在“.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');
  });

});

---

编辑

我忘记在我的 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 并添加一个新类，而不是这个:

//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;
}