javascript - Jquery - 动画作为幻灯片

标签 javascript jquery html css

你好我有一个使用 HTML & CSS & JQuery 的简单动画车，但我想添加一些效果，例如我需要在汽车进入并运行后停止车轮旋转当汽车开始离开屏幕时车轮转动，这是第一个问题。

第二个问题

当汽车进入屏幕时，我需要改变汽车 Angular (旋转)并降低汽车速度。
当汽车启动离开屏幕时，以动画方式显示汽车 Angular (旋转)并提高汽车速度。


Youtube Video


这是我的代码:

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

var $cars = $('.car');
$('.car-model').on('click', function () {

    var $current = $cars.find('.current');
    var $next = $current.next();
    if ($next.length === 0) $next = $current.prevAll().last();

    $current.addClass('car--trans-out');
    setTimeout(function () {
        $current.removeClass('current').removeClass('car--trans-out');
        $next.addClass('current').addClass('car--trans-in');
        setTimeout(function () {
            $next.removeClass('car--trans-in');
        }, 1000)
    }, 1000);
})
.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-container{
    position: absolute;
    left: 100%;
    overflow: hidden;
}
.current{
    position: relative;
    left: 0;
}
.current .current{
    left: 0;
}

.car .car-image .car__wheel{
    width:99px;
    height:100px;
    position:absolute;
    background-repeat:no-repeat;
    background-position:center center;
}
.car .car-image .car__wheel.left{
    background-image:url('http://store6.up-00.com/2017-03/148992740531661.png');
    top:94px;
    left:98px;
}
.car .car-image .car__wheel.right{
    background-image:url('http://store6.up-00.com/2017-03/148992740544512.png');
    top:94px;
    right:75px;
}
.car--trans-in .car__wheel{
   animation: roll-in 400s ease-out;
}
.car--trans-out .car__wheel{
   animation: roll-out 400s ease-out;
}
.car--trans-in .car-image{
   animation: trans-in 1s ease-out;
}
.car--trans-out .car-image{
   animation: trans-out 1s ease-in;
}
.car--trans-in .car__wheel{
   animation: roll-in 1s ease-out;
}
.car--trans-out .car__wheel{
   animation: roll-out 1s ease-out;
}
.car--trans-in .car-image img{
   animation: bounce-in 1s ease-out;
}
.car--trans-out .car-image img{
   animation: bounce-out 1s ease-in;
}

@keyframes trans-in {
    0% {transform: translateX(100%);}
    80% {transform: translateX(0%);}
    100% {transform: translateX(0%);}
}
@keyframes trans-out {
    0% {transform: translateX(0%);}
    10% {transform: translateX(0%);}
    80% {transform: translateX(-100%);}
    100% {transform: translateX(-100%);}
}
@keyframes roll-in {
    0% {transform: rotate(0deg);}
    80% {transform: rotate(-720deg);}
    100% {transform: rotate(-720deg);}
}
@keyframes roll-out {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-720deg);}
}
@keyframes bounce-in {
    0% {transform: rotate(2deg);}
    70% {transform: rotate(2deg);}
    80% {transform: rotate(-1deg);}
    90% {transform: rotate(1deg);}
    100% {transform: rotate(0deg);}
}
@keyframes bounce-out {
    0% {transform: rotate(0deg);}
    20% {transform: rotate(2deg);}
    100% {transform: rotate(2deg);}
}






.car .wheelEleContainer{
    cursor:pointer;
}
<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">
            <button>Next</button>
            <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-xs-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-container current">
                        <div class="car-image" data-car-index="1">
                            <img class="img-responsive" src="http://store6.up-00.com/2017-03/148992727111161.png" alt="" />
                            <div class="car__wheel left"></div>
                            <div class="car__wheel right"></div>
                        </div>
                    </div>
                    <div class="car-image-container">
                        <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="car__wheel left"></div>
                            <div class="car__wheel right"></div>
                        </div>
                    </div>
                    <div class="car-image-container">
                        <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="car__wheel left"></div>
                            <div class="car__wheel right"></div>
                        </div>
                    </div>
                    <div class="car-image-container">
                        <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="car__wheel left"></div>
                            <div class="car__wheel right"></div>
                        </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>

注意:请全屏运行代码片段

最佳答案

您可以使用 CSS 动画让汽车过渡到框架中，使用另一个动画让汽车在移动时旋转。

看看这个例子 jsFiddle我已经做到了。

我正在使用这样的 html 结构:

<div class="cars">
    <div class="car">
        <div class="car__inner">
            <div class="car__chassis">
            </div>
            <div class="car__wheels">
                <div class="car__wheel car__wheel--left">
                </div>
                <div class="car__wheel car__wheel--right">
                </div>
            </div>
        </div>
    </div>
    ...
</div>

使用 jQuery，我将一些类添加到 <div class="car">这将允许我们附加 CSS 动画。

var $cars = $('.cars');
$('button').on('click', function(){

  var $active = $cars.find('.car--active');
  var $next = $active.next();
  if($next.length===0) $next = $active.prevAll().last();

  $active.addClass('car--trans-out');
  setTimeout(function(){
    /*Wait a second before removing the class*/
    $active.removeClass('car--active').removeClass('car--trans-out');
    $next.addClass('car--active').addClass('car--trans-in');
    setTimeout(function(){
        $next.removeClass('car--trans-in');
    },1000)
  },1000);
})

编辑:这是另一个 jsFiddle它使用与原始帖子相同的标记和脚本，并添加了一些类名和动画

关于javascript - Jquery - 动画作为幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42903298/

上一篇：javascript - Bootstrap 导航栏占用了两行

下一篇：javascript - HTML Canvas 宽度无法调整

相关文章：

html - mozilla 中的动画无法正常工作

javascript - Jquery 开/关事件

javascript - 如何从异步调用返回响应？

javascript - 获取值和文本以及div内容javascript

javascript - 做一些 ajax 并使用 getJSON 返回一个 promise

html - 如何在浏览器调整大小时保持元素数量/收缩

html - 如何在不使用 CSS 移动文本的情况下相对于文本定位图像？

javascript - 使用服务方法单元测试 Node js Controller 的最佳方法是什么

javascript - 如何使用 jQuery 将文本插入到文本区域的特定行中？

javascript - 基本身份验证无法使用 JavaScript

©2024 IT工具网  联系我们