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

I have a main panel hided at first, and sliding when the web runs. It has this style:

我首先隐藏了一个主面板,并在网络运行时滑动。它有这种风格:

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

When the website runs, jQuery calculates window's width and hides it translating X out of the window:

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

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

And, theorically, CSS should bring it to it's correct position by adding the class .expanded:

而且,理论上,CSS应该通过添加类.expanded将它带到正确的位置:

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

Which takes it to it's 0% translate X position:

这需要它0%翻译X位置:

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

Problem: CSS makes just nothing because jQuery styles .contentPanel on its HTML tag, like this:

问题:CSS没有任何结果,因为jQuery在其HTML标记上设置.contentPanel样式,如下所示:

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

And even thow a translateX(0%) is being added, nothing moves due to the fact that X px are given on HTML's opening tag atribute.

即使是正在添加translateX(0%),也没有任何动作,因为X px是在HTML的开始标记属性上给出的。

3 个解决方案

#1

I would make a wrapper that is 100% width (which is default) that you can utilize to hide .contentPanel. This way you only need toggle the class and not mess with $.css() at all.

我会创建一个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;
}

#2

Inline style has a higher priority. Try setting the left property to blank before adding a class "expanded". Like so:

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

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

#3

Couldn't you set left to auto before adding the .expanded class?

你不能在添加.expanded类之前将其设置为auto吗?

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

That said, I think Michael's solution is the best over all.

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

EDIT

Or you can set .contentPanel to transform: translateX(-100vw), as the poster seems to prefer.

或者您可以将.contentPanel设置为transform:translateX(-100vw),因为海报似乎更喜欢。

VW has pretty good support now. I would avoid VH for the time being, though, because VH is buggy in mobile Safari.

大众现在有很好的支持。不过,我暂时会避免使用VH,因为VH在移动版Safari中有漏洞。

#1