如果元素平移 3d ... addClass答案

【问题标题】：If element translate 3d ... addClass如果元素平移 3d ... addClass
【发布时间】：2017-07-28 11:57:51
【问题描述】：

我怎样才能编写一个脚本来做到这一点？

如果 div 类“test”具有属性 translate3d (0px, 100px, 0px)，则添加“活动”类，否则将其删除。

我尝试过这样的事情，但它不正确......

setInterval(function(){
  if($('.test').css('transform') == 'translate3d(0px, 100px, 0px)') {
    $('.test').addClass('active');
  } else {
    $('.test').removeClass('active');
  }
}, 1);

【问题讨论】：

标签： jquery setinterval detect translate3d

【解决方案1】：

您需要使用正则表达式匹配如下：-

$(document).ready(function(){
  $('.test').each(function(){
    console.log($(this).css('transform') == 'matrix(1, 0, 0, 1, 0, 100)');
    if($(this).css('transform') == "matrix(1, 0, 0, 1, 0, 100)"){
      $(this).addClass('active');
    } else {
      $(this).removeClass('active');
    }
  });
});

.active {
  color: red;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" style="transform:translate3d(0px, 100px, 0px)">Hello</div><br/><br/>
<div class="test" style="transform:translate3d(10px, 10px, 100px)">Hello</div>

注意：- 检查console.log() 的值，你会看到它是一个矩阵

参考：-Get translate3d values of a div?

检查任何元素是否具有变换属性或不使用下面的正则表达式：-

/matrix(?:(3d)\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))(?:, (\d+)), \d+\)|\(\d+(?:, \d+)*(?:, (\d+))(?:, (\d+))\))/)

【讨论】：

谢谢，现在我记录了正则表达式匹配。我不明白你的例子 qul 中的控制值：如果我只想在 translate3d (0px, 100px, 0px) 而不是当有另一个值时将“hello”着色为红色。
@Andrea 我现在更改了我的代码。请检查并让我知道你明白了吗？
谢谢你，我明白我错在哪里了。谢谢！！
@Andrea 很高兴为您提供帮助:):)
谁能帮我解决这个问题？ stackoverflow.com/q/62437585/13399106