Question

有没有办法控制JS / jQuery中类更改的实现级别。

想象一下：

.box {
background: green;
width: 500px;
height: 100px;
transition:all 1s;
}
.box.active {
tranform: translateX(200px);
width:250px;
background:blue;
}

传统上使用jQuery我们会添加和删除体验动画的新类，因为它更改为＆＃34; active＆＃34;状态。

$("box").addClass("active");

但是......我们想要实现50％甚至28％的活跃状态。想象一下滚动图库，我们有多个元素经历多个过渡，我们将这些过渡的范围与用户在图库上滚动或拖动的水平相匹配。希望这是有道理的。

例如。 $("box").partialAddClass("active", 20% );

这样的事情是否可能。是否有其他方法可以实现这一目标。显然，我们可以通过在JS中创建普通和活动状态的css属性并应用它们来实现这一点，但这适用于opacity和width这样的数字质量。但它对于程序员来说并不是最有效的方法。有没有简单的选择。

Answer 1

您只需使用简单的CSS即可完成所需的操作。但是你可以用Javascript来做。我将向您展示如何使用const Bar = obj.Bar; const Selectors = obj.Data.Selectors进行操作，这是一套超级CSS。

以此为例。直接取自他们的文档。

LESS

您基本上定义了一个函数并将参数传递给它。在你的情况下，你可以这样做，

.average(@x, @y) {
    @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

这可以通过Javascript完成，但我只是想向您和其他人展示它可以在CSS中完成。您只需在.cutDownByPercent(@percent, @width, @height){ @cutDownWidth: @percent * @width; @cutDownHeight: @percent * @height; } .box { background: green; .cutDownByPercent(0.2, 500, 100); width: @cutDownWidth; height: @cutDownHeight; transition:all 1s; }文件中创建多个类。

Answer 2

所以这是我使用jQuery的基本思想。此函数假定您将专门为某个类设置它。您可以将其扩展为接受CSS作为参数，或者甚至使用.CSS()来检测样式（使其成为全局函数）并从那里对其进行操作。但这应该是一个起点...

它的工作原理是传递你想要的百分比，然后传递你想要影响的元素的类名。对于颜色，您可以使用十六进制颜色代码进行rgba转换。然后，您可以控制rgba的alpha通道来控制不透明度。

＆＃13;

function addPartialClass(percentage, el){
  var w = 250;
  var tr = 200;
	w = w/100*percentage;
	tr = tr/100*percentage;
	$(el).css({
		'transform': 'translateX('+tr+'px)',
		'width': w
	});
}

$('button').on('click', function(){
  addPartialClass(50, ".box"); 
});

＆＃13;

.box {
background: green;
width: 500px;
height: 100px;
transition:all 1s;
}
.box.active {
transform: translateX(200px);
width:250px;
background:blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

<button>Click me</button>

＆＃13;

Answer 3

根据comment中@CBroe的建议，你可以得到＆＃34; partial＆＃34; animation的样式应用程序：

＆＃13;

@keyframes x {
  from { /* State "A". Could as well be the initial style. */
    background: green;
    color: gold;
    width: 250px;
  }
  to { /* State "B". */
    background: blue;
    color: white;
    width: 500px;
  }
  50% { /* … just to show off */
    font-weight: bold;
    font-style: italic;
  }
}
.box {
  animation-name: x;
  animation-duration: 1s; /* "100%" */
  animation-play-state: paused; /* don't move */
  animation-timing-function: linear; /* predictable */
  animation-iteration-count: 1; /* no need for more */
  animation-fill-mode: both; /* just to show the initial and final states */
}
.box.halfway {
  animation-delay: -0.5s; /* = start in the middle, 50% of the duration */
}
.box.twenty {
  animation-delay: -0.2s; /* = 20% */
}
.box.finish {
  animation-delay: -1s; /* = 100% */
}

＆＃13;

<p class="box">State "A"</p>
<p class="box twenty">20% applied State "B"</p>
<p class="box halfway">Half applied State "B"</p>
<p class="box finish">State "B"</p>

＆＃13;

（更新2018-01-23：意识到你可以从一开始就利用负延迟和暂停状态，所以不需要JS和计算。 Wohoo！）

使用JS按百分比部分实现CSS类

3 个答案: