javascript - 添加类时停止 CSS 动画

标签 javascript jquery css animation

您好 我的问题是当汽车进入屏幕时如何停止车轮旋转，每次有汽车进入屏幕时请停止车轮旋转。

这是我的代码:

$(document).ready(function () {
    $('.wheelEleContainer .slectWheel').click(function (e) {
        e.preventDefault();
        var getImgWheel = $(this).find('img').attr('src');
        $('.car .wheelInCar').css('background-image',
          'url(' + getImgWheel + ')'
        );
    });
    var running = false;
    $('.car-model').click(function (e) {
        e.preventDefault();
        var index = $(this).data("index");

        var $pre = $('.car-image.current');
        var $dom = $('.car-image[data-car-index="' + index + '"]');
        if ($dom.hasClass("current") || running) {
            return;
        }
        var current_pull = parseInt($('.current').css('transform').split(',')[5]);
        
        running = true;
        $dom.addClass('current');
        $pre.addClass('left').removeClass('current');
        setTimeout(function () {
            if (current_pull == 0) {
                $('.wheelInCar').css('animation-play-state', 'paused');
            }
            else {
                $('.wheelInCar').css('animation-play-state', 'running');
            }
            $pre.addClass('no-transition');
            $pre.removeClass('left');
            setTimeout(function () {
                $pre.removeClass('no-transition');
                running = false;
            }, 100);
        }, 2100);

    });
})
.car { /* My Container */
  height: 600px;
  padding: 40px 0;
  background-color: #efefef;
  overflow: hidden;
}

.car .click { /* Click Button */
  width: 100%;
  padding: 10px;
  text-align: center;
  border: 1px solid #0094ff;
  margin-bottom: 30px;
}

.car-image { /* The Cars*/
  position: absolute;
  top: 100px;
  margin-bottom: 30px;
  transform: translate(calc(50vw + 400px), 0);
  transition: all 2s ease-in-out;
  //width:50vw;
}

.car .car-image.current /* When Click the current car will be animated to translate (0, 0) */ {
  transform: translate(0, 0);
  display: block;
}

.car .car-image.left /*When The Car go out of the screen */ {
  transform: translate(calc(-50vw - 400px), 0);
  display: block;
}

.car .car-image.no-transition {
  transition: none; /* Remove the transition*/
}

.car .car-image .wheelInCar {
  width: 99px;
  height: 100px;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  /* Rotating the Car Wheel, What I Need to stop the Wheel Animation When Car go into the screen but run Car Wheel when the car started to left the screen */ 
  -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;
}

.car .car-image .wheelInCar.left {
  background-image: url('http://store6.up-00.com/2017-03/148992740531661.png');
  top: 94px;
  left: 98px;
}

.car .car-image .wheelInCar.right {
  background-image: url('http://store6.up-00.com/2017-03/148992740544512.png');
  top: 94px;
  right: 75px;
}

.car .wheelEleContainer {
  cursor: pointer;
}
/*Rotating Car Wheels*/
@keyframes wheelRotating {
  from {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="car">
  <div class="container">
    <div class="row">
      <div class="car-button-container">
        <div class="col-md-2 col-md-offset-2 col-sm-3 col-xs-6">
          <div class="click car-model" data-index="1">
            Car Model 1
          </div>
        </div>
        <div class="col-md-2 col-sm-3 col-xs-6">
          <div class="click car-model" data-index="2">
            Car Model 2
          </div>
        </div>
        <div class="col-md-2 col-sm-3 col-xs-6">
          <div class="click car-model" data-index="3">
            Car Model 3
          </div>
        </div>
        <div class="col-md-2 col-sm-3 col-s-6">
          <div class="click car-model" data-index="4">
            Car Model 4
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-7 col-lg-offset-2">
        <div class="car-image current" data-car-index="1">
          <img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
          <div class="wheelInCar left"></div>
          <div class="wheelInCar right"></div>
        </div>
        <div class="car-image" data-car-index="2">
          <img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727122822.png" alt="" />
          <div class="wheelInCar left"></div>
          <div class="wheelInCar right"></div>
        </div>
        <div class="car-image" data-car-index="3">
          <img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
          <div class="wheelInCar left"></div>
          <div class="wheelInCar right"></div>
        </div>
        <div class="car-image" data-car-index="4">
          <img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
          <div class="wheelInCar left"></div>
          <div class="wheelInCar right"></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="wheelEleContainer">
        <div class="col-lg-1 col-lg-offset-2">
          <div class="slectWheel">
            <img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
          </div>
        </div>
        <div class="col-lg-1">
          <div class="slectWheel">
            <img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
          </div>
        </div>
        <div class="col-lg-1">
          <div class="slectWheel">
            <img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
          </div>
        </div>

      </div>
    </div>
  </div>
</div>


请全屏运行代码片段

最佳答案

试试这个代码

$(document).ready(function () {
	run();
    $('.wheelEleContainer .slectWheel').click(function (e) {
        e.preventDefault();
        var getImgWheel = $(this).find('img').attr('src');
        $('.car .wheelInCar').css('background-image',
          'url(' + getImgWheel + ')'
        );
    });

    var running = false;
    $('.car-model').click(function (e) {
        e.preventDefault();
        var index = $(this).data("index");
        var $pre = $('.car-image.current');
        var $dom = $('.car-image[data-car-index="' + index + '"]');
        if ($dom.hasClass("current") || running) {
            return; 
        }
        running = true;
        $dom.addClass('current');
        $pre.addClass('left').removeClass('current');
        setTimeout(function () {
            $pre.addClass('no-transition');
            $pre.removeClass('left');
            setTimeout(function () {
                $pre.removeClass('no-transition');
                running = false;
            }, 100);
        }, 2100);
        run();

    });
    
    function run(){
		$(".car-image.current").removeClass("in");
		$(".car-image.current").removeClass("out");
		setTimeout(function(){
			$(".car-image.current").addClass("in");
		},1000);
		setTimeout(function(){
			$(".car-image.current").addClass("out");
		},5000);
		
	}
})
.car{
    height:600px;
    padding:40px 0;
    background-color:#efefef;
    overflow:hidden;
}
.car .click{
    width:100%;
    padding:10px;
    text-align:center;
    border:1px solid #0094ff;
    margin-bottom:30px;
}
.car-image {
    position:absolute;
    top: 100px;
    margin-bottom: 30px;
    -moz-transform: translate(160%, 0);
    -ms-transform: translate(160%, 0);
    -o-transform: translate(160%, 0);
    -webkit-transform: translate(160%, 0);
    transform: translate(160%, 0);
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}
.car .car-image.current {
    display:block;
    transform: translateX(200%);
    transition:all 1s ease;
}
.car .car-image.left {
    -moz-transform: translate(-160%,0);
    -ms-transform: translate(-160%,0);
    -o-transform: translate(-160%,0);
    -webkit-transform: translate(-160%,0);
    transform: translate(-160%,0);
    display:block;
}
.car .car-image.no-transition {
    transition:none;
}
.car .car-image .wheelInCar{
    width:99px;
    height:100px;
    position:absolute;
    background-repeat:no-repeat;
    background-position:center center;
 }
.car .car-image .wheelInCar.left{
    background-image:url('http://store6.up-00.com/2017-03/148992740531661.png');
    top:94px;
    left:98px;
}
.car .car-image .wheelInCar.right{
    background-image:url('http://store6.up-00.com/2017-03/148992740544512.png');
    top:94px;
    right:75px;
}
.car .wheelEleContainer{
    cursor:pointer;
}
.car .car-image.current.in{
	transform:translateX(100px);
	transition:all 2.6s ease-in;
}
.car .car-image.current.out{
   transform:translateX(-200%);
   transition:all 2.6s ease-out;
}
.car .car-image.current.in .wheelInCar{
    animation: wheelRotatingIn 2s ease-in 1.3;
}
.car .car-image.current.out .wheelInCar{
    animation: wheelRotatingOut 2s ease-out 1.3;
}
@keyframes wheelRotatingIn {
    0% { -webkit-transform: rotate(0deg); }
    50% { -webkit-transform: rotate(800deg); }
    100% { -webkit-transform: rotate(1000deg); }
}
@keyframes wheelRotatingOut {
    0% { -webkit-transform: rotate(0deg); }
    50% { -webkit-transform: rotate(800deg); }
    100% { -webkit-transform: rotate(1600deg); }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="car">
            <div class="container">
                <div class="row">
                    <div class="car-button-container">
                        <div class="col-xs-6 col-sm-3 col-md-2 col-md-offset-2 ">
                            <div class="click car-model" data-index="1">
                                Car Model 1
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 col-md-2">
                            <div class="click car-model" data-index="2">
                                Car Model 2
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 col-md-2">
                            <div class="click car-model" data-index="3">
                                Car Model 3
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-3 col-md-2">
                            <div class="click car-model" data-index="4">
                                Car Model 4
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-7 col-lg-offset-2">
                        <div class="car-image current" data-car-index="1">
                            <img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
                            <div class="wheelInCar left"></div>
                            <div class="wheelInCar right"></div>
                        </div>
                        <div class="car-image" data-car-index="2">
                            <img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727122822.png" alt="" />
                            <div class="wheelInCar left"></div>
                            <div class="wheelInCar right"></div>
                        </div>
                        <div class="car-image" data-car-index="3">
                            <img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727131353.png" alt="" />
                            <div class="wheelInCar left"></div>
                            <div class="wheelInCar right"></div>
                        </div>
                        <div class="car-image" data-car-index="4">
                            <img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727151114.png" alt="" />
                            <div class="wheelInCar left"></div>
                            <div class="wheelInCar right"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="wheelEleContainer">
                        <div class="col-lg-1 col-lg-offset-2">
                            <div class="slectWheel">
                                <img src="http://store6.up-00.com/2017-03/148992740561243.png" alt="" />
                            </div>
                        </div>
                        <div class="col-lg-1">
                            <div class="slectWheel">
                                <img src="http://store6.up-00.com/2017-03/14899275127831.png" alt="" />
                            </div>
                        </div>
                        <div class="col-lg-1">
                            <div class="slectWheel">
                                <img src="http://store6.up-00.com/2017-03/148992740580684.png" alt="" />
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

关于javascript - 添加类时停止 CSS 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42888364/

上一篇：css - 在没有层叠的情况下使用 CSS(让每个选择器完全包含其样式)会有任何缺点吗？

下一篇：javascript - 在 html 中创建和链接 div 标签

相关文章：

javascript - Codemirror:抓取标题值到输入[type=text]

javascript - 如何将换行符/回车符插入到 element.textContent 中？

javascript - 如何在jquery中添加多个值？

javascript - 使用 jquery 更改事件选项卡

jquery - 为什么我的 ajax 函数不能无限滚动？

html - 有没有办法让 html 列表表现得像这样

javascript - 为什么 isNaN 第二次调用时不起作用？

jquery - jquery 的问题向上滑动 - 向下滑动 - div 没有出现

jquery - 有没有一种简单的方法可以使用 jQuery 淡入 css :hover background?

asp.net - 在 IIS 中托管时不应用字体

©2024 IT工具网  联系我们