Javascript 添加类时停止CSS动画

你好我的问题是当车辆进入屏幕时，如何停止车轮转动，每次当任何车辆进入屏幕时，请停止车轮转动。

这里是我的代码：

$（文档）.ready（函数（）{
$（'.wheeleContainer.slectweel'）。单击（函数（e）{
e、 预防默认值（）；
var getImgWheel=$（this.find（'img'）.attr（'src'）；
$（'.car.wheelento'）.css（'background-image'，
'url（'+getImgWheel+'）'
);
});
var running=false；
$（“.car model”）。单击（函数（e）{
e、 预防默认值（）；
var指数=$（此）.data（“指数”）；
var$pre=$（'.car image.current'）；
var$dom=$（'.car image[data car index=“'+index+””）；
if（$dom.hasClass（“当前”）| |运行）{
回来
}
var current_pull=parseInt（$（'.current'）.css（'transform'）.split（'，'）[5]）；
运行=真；
$dom.addClass（'current'）；
$pre.addClass（'left'）。removeClass（'current'）；
setTimeout（函数（）{
如果（当前拉力==0）{
$（'.wheelento'）.css（'animation-play-state'，'paused'）；
}
否则{
$（'.wheelento'）.css（'animation-play-state'，'running'）；
}
$pre.addClass（'no-transition'）；
$pre.removeClass（'left'）；
setTimeout（函数（）{
$pre.removeClass（'no-transition'）；
运行=错误；
}, 100);
}, 2100);
});
})

.car{/*我的集装箱*/
高度：600px；
填充：40px0；
背景色：#EFEF；
溢出：隐藏；
}
.car。单击{/*单击按钮*/
宽度：100%；
填充：10px；
文本对齐：居中；
边框：1px实心#0094ff；
边缘底部：30px；
}
.汽车图像{/*汽车*/
位置：绝对位置；
顶部：100px；
边缘底部：30px；
转换：转换（计算（50vw+400px），0）；
过渡：所有2个易于输入输出；
//宽度：50vw；
}
.car.car-image.current/*单击时，当前车辆将设置动画以转换（0，0）*/{
变换：平移（0,0）；
显示：块；
}
.car.car-image.left/*当车辆离开屏幕时*/{
转换：转换（计算（-50vw-400px），0）；
显示：块；
}
.汽车，汽车形象，无过渡{
转换：无；/*删除转换*/
}
.汽车.汽车图像.车轮{
宽度：99px；
高度：100px；
位置：绝对位置；
背景重复：无重复；
背景位置：中心；
/*旋转车轮，当汽车进入屏幕时，我需要停止车轮动画，但当汽车开始离开屏幕时，我需要运行车轮*/
-webkit动画：车轮旋转2s线性无限；
-moz动画：车轮旋转2s线性无限；
-ms动画：车轮旋转2s线性无限；
-o-动画：车轮旋转2s线性无限；
动画：车轮旋转2s线性无限；
}
.汽车.汽车图像.车轮.左{
背景图像：url（'http://store6.up-00.com/2017-03/148992740531661.png');
顶部：94px；
左：98px；
}
.汽车.汽车图像.车轮.右侧{
背景图像：url（'http://store6.up-00.com/2017-03/148992740544512.png');
顶部：94px；
右：75px；
}
.汽车.轮式集装箱{
光标：指针；
}
/*旋转车轮*/
@旋转车轮的关键帧{
从{
-moz变换：旋转（360度）；
-ms变换：旋转（360度）；
-o变换：旋转（360度）；
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
到{
-moz变换：旋转（0）；
-ms变换：旋转（0）；
-o变换：旋转（0）；
-webkit变换：旋转（0）；
变换：旋转（0）；
}
}

车型1
车型2
车型3
车型4

CSS的一个衬里：

.car .car-image .wheelInCar {
    width: 99px;
    height: 100px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-animation: wheelRotating 2s linear infinite;
    -moz-animation: wheelRotating 2s linear infinite;
    -ms-animation: wheelRotating 2s linear infinite;
    -o-animation: wheelRotating 2s linear infinite;
    animation: wheelRotating 2s linear infinite;
    animation-play-state: paused; /* Not exactly one line if you want to make compatible with prefixes */
}

---

尝试此代码

$（文档）.ready（函数（）{
run（）；
$（'.wheeleContainer.slectweel'）。单击（函数（e）{
e、 预防默认值（）；
var getImgWheel=$（this.find（'img'）.attr（'src'）；
$（'.car.wheelento'）.css（'background-image'，
'url（'+getImgWheel+'）'
);
});
var running=false；
$（“.car model”）。单击（函数（e）{
e、 预防默认值（）；
var指数=$（此）.data（“指数”）；
var$pre=$（'.car image.current'）；
var$dom=$（'.car image[data car index=“'+index+””）；
if（$dom.hasClass（“当前”）| |运行）{
回来
}
运行=真；
$dom.addClass（'current'）；
$pre.addClass（'left'）。removeClass（'current'）；
setTimeout（函数（）{
$pre.addClass（'no-transition'）；
$pre.removeClass（'left'）；
setTimeout（函数（）{
$pre.removeClass（'no-transition'）；
运行=错误；
}, 100);
}, 2100);
run（）；
});
函数运行（）{
$（“.car image.current”）.removeClass（“in”）；
$（“.car image.current”）.removeClass（“out”）；
setTimeout（函数（）{
$（“.car image.current”）.addClass（“in”）；
},1000);
setTimeout（函数（）{
$（“.car image.current”）.addClass（“out”）；
},5000);
}
})

.car{
高度：600px；
填充：40px0；
背景色：#EFEF；
溢出：隐藏；
}
.车，点击{
宽度：100%；
垫