Question

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

正如您在此CodePen上看到的那样：https://codepen.io/Rojiraan/pen/PJoMvr，一切都可以按照我的要求或几乎完成。我唯一的问题是，如果我的文本比实际写入的文本更长或更小，则div不能正确地返回到他的左角位置，因此箭头不是完全水平对齐的。

我认为添加＆＃34; calc＆＃34;在＆＃34; .translate＆＃34;上课或做一些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中添加一些非常重要的东西，导致了最初的问题。在我的真实页面中，这个＆＃34;旁边＆＃34; html元素在使用＆＃34;动画延迟：1s;＆＃34;延迟1秒后出现，所以CSS旁边元素实际上看起来像这样：

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

...也有问题，因为＆＃34; @关键帧＆＃34;似乎比其他代码更重要。我尝试添加＆＃34;左：45px！important＆＃34;，这在Firefox中有效（有抖动），但在Chrome中没有。最后，我决定转而使用JQuery并添加一个新类：

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

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

以下是一个代码示例：https://codepen.io/Rojiraan/pen/QqwjzJ

Answer 1

取代translateX动态值，转到全宽，而不是添加左侧位置;

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

Div大小取决于文字，点击左右翻译

修改

1 个答案: