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