gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:08:42 24 4
gpt4 key购买 nike

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

.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,所以没有任何变化。

最佳答案

我会制作一个宽度为 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;
}

关于jQuery 在元素上添加样式 - 不可能在使用 CSS 后对其进行转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24867279/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com