jQuery 在元素上添加样式 - 使用 CSS 后无法对其进行转换

Question

我最初隐藏了一个主面板，并在网络运行时滑动。它有这种风格：

.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');

将它带到它的 0% 平移 X 位置：

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

问题：CSS 什么都不做，因为 jQuery 在其 HTML 标签上设置了 .contentPanel 样式，如下所示：

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

即使添加了 translateX(0%)，由于 HTML 的开始标记属性上给出了 X px，因此没有任何移动。

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

内联样式具有更高的优先级。在添加“扩展”类之前尝试将左侧属性设置为空白。像这样：

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

Answer 3

您不能在添加.expanded 类之前将left 设置为auto 吗？

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

也就是说，我认为迈克尔的解决方案是最好的。

编辑

或者您可以将.contentPanel 设置为transform: translateX(-100vw)，就像发帖人喜欢的那样。

大众有pretty good support now。不过，我暂时会避免使用 VH，因为 VH 在移动 Safari 中存在问题。