Question

我正在尝试创建一个网络演示文稿，并希望添加一个2个半身的动画，它在Click上运行（到目前为止有效）但我也希望它们在点击后留在那里。

standard looking version http://img5.fotos-hochladen.net/uploads/3ozt9kfyr08.jpg 0.75 seconds after the click on the logo in the middle http://img5.fotos-hochladen.net/uploads/2lpdyoktws6.jpg after the animation http://img5.fotos-hochladen.net/uploads/18cd9xfjg21.jpg

这是我的代码：HTML

    <body>
    <a href="#" id="btn_logo" onclick="return false"> <div id="animation">      
            <div id="logo"> </div>  
            <div id="up"> </div>
            <div id="down"> </div>
        </div></a>

然后用：

制作动画

#btn_logo:active #up

和

#btn_logo:active #down

如何在动画结束后切换动画？

Answer 1

你应该做的是在CSS类上设置动画，然后在点击时添加或删除CSS类。

像这样：https://jsfiddle.net/8troo8bw/1/

（或者你的确切html）：https://jsfiddle.net/8troo8bw/2/

这里的关键是动画：

#up, #down {
  background: #000;
  position:absolute;
  right:0;
  left:0;
  width:100%;
  height:25px;
  transition: top 0.25s;
}

#up.moveUp {
  top: 25px;
}
#down.moveDown {
  top: 100px;
}

和相关的JS一起添加类：

$('#click').on('click', function(){
  $('#up').addClass('moveUp');
  $('#down').addClass('moveDown');
});

Answer 2

做这样的事情：

$(document).ready(function(){
  $('#animation').on('click', function() {
      $('.up,.down').addClass('animated');
    });
  });

#animation {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: yellow;
}

.logo {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  width: 50px;
  background: red;
  border-radius: 50%;
  margin: 0 auto;
}

.up {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 50%;
  left: 0;
  background: green;
}

.down {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  background: blue;
}

.up.animated {
  bottom: 100%;
  top: -50%;
  transition: all 1s linear;
}

.down.animated {
  top: 100%;
  bottom: -50%;
  transition: all 1s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="animation">      
    <div class="up"> </div>
    <div class="down"> </div>
    <div class="logo"> </div>  
</div>

CSS制作：主动切换

2 个答案: