jQuery在元素上添加样式-不可能在CSS之后转换它

Question

我首先隐藏了一个主面板，并在web运行时滑动。它的样式是这样的:

.contentPanel {    
    top: calc(40% - 1px);    
    height: 50%;  
    padding:10px;
    font-size:1.2em;
    overflow-y: scroll;
    overflow-x: hidden;
    left: 20%;
   width: 75%;
}
.contentPanel{
   transition: transform 5000ms cubic-bezier(0.095, 0.725, 0.020, 1.005); 
}

当网站运行时，jQuery计算窗口的宽度并隐藏它翻译出窗口的X:

  $('.contentPanel').css('left',window.innerWidth+"px");

从理论上讲，CSS应该通过添加.expanded:

类来将它带到正确的位置。

$('.contentPanel').addClass('expanded');

这将使它的X位置变为0%

.expanded {
    transform: translate(0%);
}

问题:CSS做什么都没有，因为jQuery样式.contentPanel在它的HTML标签，像这样:

<div class="contentPanel expanded" style="left: 1366px;">

甚至translateX(0%)是如何被添加的，由于X px是在HTML的开始标签属性上给出的事实，没有任何移动。

Answer 1

我会制作一个100%宽度的包装器(这是默认的)，你可以利用它来隐藏。contentpanel。这样，你只需要切换类，而不需要打乱$.css()。

http://jsfiddle.net/M8PQR/

HTML

<div class="wrapper">
    <div class="contentPanel"></div>
</div>
<a class="toggle">show/hide</a>

JAVASCRIPT

var $wrapper = $('.wrapper');
$('a.toggle').on('click', function() {
    $wrapper.toggleClass('expanded');
});

CSS

.contentPanel {    
    top: calc(40% - 1px);    
    height: 50%;  
    padding:10px;
    font-size:1.2em;
    overflow-y: scroll;
    overflow-x: hidden;
    margin: auto;
   width: 75%;
    background: deepSkyBlue;
}
.wrapper{
    transform: translate(100%);
    transition: transform 5000ms cubic-bezier(0.095, 0.725, 0.020, 1.005);
}
.wrapper.expanded {
    transform: none;
}
.toggle {
    cursor: pointer;
}

Answer 2

内联样式具有更高的优先级。尝试在添加类"expanded"之前将left属性设置为空白。像这样:

$('.contentPanel').css('left',''); 
$('.contentPanel').addClass('expanded');

Answer 3

不能先设置left为auto再添加.expanded类吗?

$('.contentPanel').css('left', 'auto').addClass('expanded');

话虽如此，我认为Michael的解决方案是最好的。

编辑

或者您可以将.contentPanel设置为transform: translateX(-100vw)，正如海报所喜欢的那样。

VW现在有很好的支持。不过，我暂时会避免使用VH，因为VH在移动Safari中有很多bug。