jquery - CSS反向动画不起作用

Question

我正在尝试反转动画，但正在添加类，但动画没有出现。我的代码有问题吗？还是我遗漏了一个重要的动画原理？

截至目前，已有处理正向和反向动画的动画类，但我需要能够反向动画而不是创建新动画来将元素带回原始状态。

代码如下:

<div class="posrel">
    <h1 class="white heading-abs">Heading</h1>
    <div class="redbg round divabs"></div>
    <button role="button" class="clickButton white customfont">Click</button>
    <button role="button" class="originalState white customfont">Original State</button>
<div>

CSS:

正文 { 背景:黑色； font-family: 'Ubuntu Mono';

.posrel
{
    position: relative;
    width: 500px;
    height: 500px;
}

.white
{
    color: white;
}

.heading-abs
{
    position: absolute;
    left: 30%;
    top: 5%;
}

.round
{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    -webkit-transform: scale(1.0);
}

.clickButton
{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: blue;
    border: none;
}

.redbg
{
    background-color: red;
}

.divabs
{
    position: absolute;
    top: 30%;
    left: 100%;
    cursor: pointer;
}

.scalebubbleani
{
    -webkit-animation: scalebubbleanim 0.5s forwards ease-in-out;
}

@-webkit-keyframes scalebubbleanim
{
    0%
    {
        -webkit-transform: scale(1.0);
    }

    100%
    {
        -webkit-transform: scale(0.2);
    }
}

*:focus
{
    outline: none;
}

.moveheadingani
{
    -webkit-animation: moveheadinganim 0.5s forwards ease-in-out;
}

@-webkit-keyframes moveheadinganim
{
    0%
    {
        position: absolute;
        top: 5%;
        left: 30%;
    }

    100%
    {
        position: absolute;
        left: 110%;
        top: 25%;
    }
}

.customfont
{
    font-family: 'Ubuntu Mono';
}

.originalState
{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgba(255, 145, 0, 0.66);
    border: none;
    position: absolute;
    top: 15%;
    left: 0%;
}

.moveheadingbackani
{
    -webkit-animation: moveheadingbackanim 0.5s forwards ease-in-out;
}

@-webkit-keyframes moveheadingbackanim
{
    0%
    {
        position: absolute;
        left: 110%;
        top: 25%;
    }

    100%
    {
        position: absolute;
        top: 5%;
        left: 30%;  
    }
}

.scalebubbleoriginalani
{
    -webkit-animation: scalebubbleoriginalanim 0.5s forwards ease-in-out;
}

@-webkit-keyframes scalebubbleoriginalanim
{
    0%
    {
        -webkit-transform: scale(0.2);
    }

    100%
    {
        -webkit-transform: scale(1.0);
    }
}

JS:

    $(document).ready(function(){

    $('.clickButton').click(function(){
        $('.round').addClass('scalebubbleani');
        $('.heading-abs').addClass('moveheadingani');
        $('.round').removeClass('scalebubbleoriginalani');
        $('.heading-abs').removeClass('moveheadingbackani');
    });

    $('.originalState').click(function(){
        $('.heading-abs').addClass('moveheadingbackani');
        $('.round').addClass('scalebubbleoriginalani');
        $('.round').removeClass('scalebubbleani');
        $('.heading-abs').removeClass('moveheadingani');
    });
});

必须反转动画会使我的 CSS 代码更简单和简洁。

Jsfiddle - http://jsfiddle.net/qyya3521/

Answer 1

最好与 CSS transitions一起使用:

$(document).ready(function(){

    $('.clickButton').click(function(){
		$('.round').addClass('round-pressed');
        $('.heading-abs').addClass('heading-abs-pressed');
	});

	$('.originalState').click(function(){
		$('.round').removeClass('round-pressed');
		$('.heading-abs').removeClass('heading-abs-pressed');
	});
});

body
{
	background: black;
	font-family: 'Ubuntu Mono';
}
.posrel
{
	position: relative;
	width: 500px;
	height: 500px;
}
.white
{
	color: white;
}
.heading-abs
{
	position: absolute;
	left: 30%;
	top: 5%;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.heading-abs-pressed {
	left: 110%;
	top: 25%;
}
.round
{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	-webkit-transform: scale(1.0);
    transform: scale(1.0);
    -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.round-pressed{
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
}
.clickButton
{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: blue;
	border: none;
}
.redbg
{
	background-color: red;
}
.divabs
{
	position: absolute;
	top: 30%;
	left: 100%;
	cursor: pointer;    
}
.customfont
{
	font-family: 'Ubuntu Mono';
}
.originalState
{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background-color: rgba(255, 145, 0, 0.66);
	border: none;
	position: absolute;
	top: 15%;
	left: 0%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="posrel">
	<h1 class="white heading-abs">Heading</h1>
	<div class="redbg round divabs"></div>
	<button role="button" class="clickButton white customfont">Click</button>
	<button role="button" class="originalState white customfont">Original State</button>
<div>

要使其跨浏览器，您还应该使用 transform 和 transition 以及 -webkit-transform 和 -webkit-transition 。