JS：想单击按钮动画

我想单击动画按钮上的动画/着色div 您可以测试我的代码并提出一些更改或添加一些代码吗？JS：想单击按钮动画

我的代码如下所示： -

.anime { 
 
    animation: coloranimate 5s; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    background: red; 
 
} 
 

 
@keyframes coloranimate { 
 
    from { 
 
    background: green; 
 
    } 
 
    to { 
 
    background: yellow; 
 
    border: 4px solid black; 
 
    } 
 
} 
 

 
@-webkit-keyframes coloranimate { 
 
    from { 
 
    background: green; 
 
    } 
 
    to { 
 
    background: yellow; 
 
    border: 4px solid black; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="anime" class="anime"> 
 
</div> 
 
<button>Animate</button>

我想动画/ colorify使用动画按钮股利。

来源

2017-07-04 Pawan Dalmia

您可以使用.addClass()单击按钮，一旦您添加包含动画属性的类，动画将自动启动。

见代码片段：

$('button').click(function() { 
 
    $('#anime').addClass("anime"); 
 
});

#anime { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    background: red; 
 
} 
 

 
.anime { 
 
    animation: coloranimate 5s; 
 
} 
 

 
@keyframes coloranimate { 
 
    from { 
 
    background: green; 
 
    } 
 
    to { 
 
    background: yellow; 
 
    border: 4px solid black; 
 
    } 
 
} 
 

 
@-webkit-keyframes coloranimate { 
 
    from { 
 
    background: green; 
 
    } 
 
    to { 
 
    background: yellow; 
 
    border: 4px solid black; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="anime"> 
 
</div> 
 
<button>Animate</button>

来源

2017-07-04 08:36:51 Chiller

在这里，你必须添加的jQuery为实现您的要求。

试试这个代码它可以帮助你。

编辑

它与普通的JavaScript。

function addAnime() { 
 
var classadd = document.getElementById('anime'); 
 
classadd.className = 'anime'; 
 
}

.anime { 
 
    animation: coloranimate 5s; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    background: red; 
 
} 
 

 
@keyframes coloranimate { 
 
    from { 
 
    background: green; 
 
    } 
 
    to { 
 
    background: yellow; 
 
    border: 4px solid black; 
 
    } 
 
} 
 

 
@-webkit-keyframes coloranimate { 
 
    from { 
 
    background: green; 
 
    } 
 
    to { 
 
    background: yellow; 
 
    border: 4px solid black; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="anime" class=""> 
 
</div> 
 
<button onclick="addAnime()">Animate</button>

来源

2017-07-04 08:37:38

“在这里，你必须添加jquery“你不**必须**，这可以用香草JavaScript来完成，所以jQuery不是**必须有**或**哈已经**使用。 – NewToJS

好吧，用香草做javascript –

@NewToJS看看代码。现在好吗？ –

通过#anime元素，然后有动画的JavaScript添加上点击一类...

$('.myButton').on('click', function(){ 
 
    $('#anime').addClass('animate-now'); 
 
});

.anime { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    background: red; 
 
} 
 

 
@keyframes coloranimate { 
 
    from { 
 
    background: green; 
 
    } 
 
    to { 
 
    background: yellow; 
 
    border: 4px solid black; 
 
    } 
 
} 
 

 
@-webkit-keyframes coloranimate { 
 
    from { 
 
    background: green; 
 
    } 
 
    to { 
 
    background: yellow; 
 
    border: 4px solid black; 
 
    } 
 
} 
 

 
.anime.animate-now { 
 
    animation: coloranimate 5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="anime" class="anime"> 
 
</div> 
 
<button class="myButton">Animate</button>

来源

2017-07-04 08:38:17 caramba

JS：想单击按钮动画

回答

相关问题