如何在点击时触发第二个动画
How can I trigger a second animation on click
我有一堆这样的 90x900 图片会在页面加载时下拉。该动画只是添加到父元素中,选择列表中的所有 li,即图像。图片的初始位置是 -1000px,并且有一个 css 动画在 Y 轴上从 0px 转换到 1000px,并且它们停留在那里
animation-fill-mode: forwards
.
我想要它,所以当我点击一个按钮时,它们 return 到它们的初始位置 -1000px。
这些是我的动画,第一个是初始页面加载动画,第二个是我想要在点击时触发的动画。
@keyframes mainpic {
from {transform: translateY(0px);}
to {transform: translateY(1000px);}
}
@keyframes mainpicleave {
from {transform: translateY(1000px);}
to {transform: translateY(0px);}
}
所以我将页面加载动画添加到 .main-pic li
,因此它将它添加到 ul
中的每个 li
。然后我在每个 li
.
上设置一个比最后一个多 0.2s 的 animation-delay
.main-pic li {
float: left;
margin-left: 7px;
z-index: -1;
position: relative;
top: -1000px;
box-shadow: 3px 0px 10px black;
animation-name: mainpic;
animation-fill-mode: forwards;
animation-duration: 3s;
}
.main-pic-01 {
background-image: url('../images/dropdown-main/main-pic-01.png');
height: 900px;
width: 90px;
animation-delay: 0.2s;
}
.main-pic-02 {
background-image: url('../images/dropdown-main/main-pic-02.png');
height: 900px;
width: 90px;
animation-delay: 0.4s;
}
所以我想我可以添加另一个 class,上面有一个动画 jQuery。我做了这个 class:
.main-pic-toggle-leave {
animation-name: mainpicleave;
animation-duration: 2s;
animation-fill-mode: forwards;
}
所以我用 jQuery 尝试了一些不同的东西。我想也许如果我删除带有初始动画的预先存在的 class,然后在上面添加 toggleClass
,它就会起作用。但事实并非如此。
$('#btn_01').click(function(){
$('.main-pic-01').toggleClass('main-pic li');
$('.main-pic-01').toggleClass('main-pic-toggle-leave');
});
不确定我还能做什么。有什么想法吗?
您可以使用过渡代替动画。然后你可以在点击时切换一些class并在这个class
中指定'after transition'状态
$("#trigger").on("click", function(e){
e.preventDefault();
$("#block").toggleClass("moved");
});//#button click
$(window).on("load", function(){
$("#trigger").trigger("click");
});//window load
#block
{
height: 100px;
width: 100px;
background: orange;
transition: transform 0.8s ease;
transform: translateX(0px);
}
#block.moved
{
transform: translateX(300px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="block"></div>
<button id="trigger">Move</button>
为 css
处的 .main-pic li
元素的 animation
属性定义单独的 class;动画 top
而不是 transform
;在 .main-pic-toggle-leave
处将 animation-fill-mode
设置为 both
$('#btn_01').click(function() {
$(".main-pic-01").toggleClass('animation');
$(".main-pic-01").toggleClass('main-pic-toggle-leave');
});
.main-pic li {
float: left;
margin-left: 7px;
z-index: -1;
position: relative;
box-shadow: 3px 0px 10px black;
top: -1000px;
}
.animation {
animation-name: mainpic;
animation-fill-mode: forwards;
animation-duration: 3s;
}
.main-pic-01 {
background-image: url("http://lorempixel.com/900/90/nature");
background-repeat: no-repeat;
height: 900px;
width: 90px;
animation-delay: 0.2s;
}
.main-pic-02 {
background-image: url();
height: 900px;
width: 90px;
animation-delay: 0.4s;
}
.main-pic-toggle-leave {
animation-name: mainpicleave;
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes mainpic {
from {
top: -1000px;
}
to {
top: 0px;
}
}
@keyframes mainpicleave {
from {
top: 0px;
}
to {
top: -1000px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_01">click</button>
<ul class="main-pic">
<li class="main-pic-01 animation"></li>
<ul>
我有一堆这样的 90x900 图片会在页面加载时下拉。该动画只是添加到父元素中,选择列表中的所有 li,即图像。图片的初始位置是 -1000px,并且有一个 css 动画在 Y 轴上从 0px 转换到 1000px,并且它们停留在那里
animation-fill-mode: forwards
.
我想要它,所以当我点击一个按钮时,它们 return 到它们的初始位置 -1000px。
这些是我的动画,第一个是初始页面加载动画,第二个是我想要在点击时触发的动画。
@keyframes mainpic {
from {transform: translateY(0px);}
to {transform: translateY(1000px);}
}
@keyframes mainpicleave {
from {transform: translateY(1000px);}
to {transform: translateY(0px);}
}
所以我将页面加载动画添加到 .main-pic li
,因此它将它添加到 ul
中的每个 li
。然后我在每个 li
.
animation-delay
.main-pic li {
float: left;
margin-left: 7px;
z-index: -1;
position: relative;
top: -1000px;
box-shadow: 3px 0px 10px black;
animation-name: mainpic;
animation-fill-mode: forwards;
animation-duration: 3s;
}
.main-pic-01 {
background-image: url('../images/dropdown-main/main-pic-01.png');
height: 900px;
width: 90px;
animation-delay: 0.2s;
}
.main-pic-02 {
background-image: url('../images/dropdown-main/main-pic-02.png');
height: 900px;
width: 90px;
animation-delay: 0.4s;
}
所以我想我可以添加另一个 class,上面有一个动画 jQuery。我做了这个 class:
.main-pic-toggle-leave {
animation-name: mainpicleave;
animation-duration: 2s;
animation-fill-mode: forwards;
}
所以我用 jQuery 尝试了一些不同的东西。我想也许如果我删除带有初始动画的预先存在的 class,然后在上面添加 toggleClass
,它就会起作用。但事实并非如此。
$('#btn_01').click(function(){
$('.main-pic-01').toggleClass('main-pic li');
$('.main-pic-01').toggleClass('main-pic-toggle-leave');
});
不确定我还能做什么。有什么想法吗?
您可以使用过渡代替动画。然后你可以在点击时切换一些class并在这个class
中指定'after transition'状态$("#trigger").on("click", function(e){
e.preventDefault();
$("#block").toggleClass("moved");
});//#button click
$(window).on("load", function(){
$("#trigger").trigger("click");
});//window load
#block
{
height: 100px;
width: 100px;
background: orange;
transition: transform 0.8s ease;
transform: translateX(0px);
}
#block.moved
{
transform: translateX(300px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="block"></div>
<button id="trigger">Move</button>
为 css
处的 .main-pic li
元素的 animation
属性定义单独的 class;动画 top
而不是 transform
;在 .main-pic-toggle-leave
animation-fill-mode
设置为 both
$('#btn_01').click(function() {
$(".main-pic-01").toggleClass('animation');
$(".main-pic-01").toggleClass('main-pic-toggle-leave');
});
.main-pic li {
float: left;
margin-left: 7px;
z-index: -1;
position: relative;
box-shadow: 3px 0px 10px black;
top: -1000px;
}
.animation {
animation-name: mainpic;
animation-fill-mode: forwards;
animation-duration: 3s;
}
.main-pic-01 {
background-image: url("http://lorempixel.com/900/90/nature");
background-repeat: no-repeat;
height: 900px;
width: 90px;
animation-delay: 0.2s;
}
.main-pic-02 {
background-image: url();
height: 900px;
width: 90px;
animation-delay: 0.4s;
}
.main-pic-toggle-leave {
animation-name: mainpicleave;
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes mainpic {
from {
top: -1000px;
}
to {
top: 0px;
}
}
@keyframes mainpicleave {
from {
top: 0px;
}
to {
top: -1000px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_01">click</button>
<ul class="main-pic">
<li class="main-pic-01 animation"></li>
<ul>