![](/img/trans.png)
[英]I want to remove class if two classes found in a div, with jQuery function I have tried but not working
[英]i want to add an animation to the div with @keyframes. I have tried basically everything i know
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.moveUp{background-color:red; width:40px;height:40px;margin:auto;margin-top:3em;}'
var moveUp = document.querySelectorAll('.moveUp')
document.getElementsByTagName('head')[0].appendChild(style)
//HTML
<body>
<div class="moveUp"></div>
<script src="script.js"></script>
</body>
我希望 div 向下移動 200px 他們再次出現
您可以將 style.innerHTML 更改為以下內容:
style.innerHTML = '.moveUp{background-color:red; width:40px;height:40px;margin:auto;margin-top:3em;animation: moveDown 1s;}@keyframes moveDown{50% {transform: translateY(200px);}100%{transform: translateY(0);}}'
為了更容易閱讀:
.moveUp {
background-color: red;
width: 40px;
height: 40px;
margin: auto;
margin-top: 3em;
animation: moveDown 1s;
}
@keyframes moveDown {
50% {
transform: translateY(200px);
}
100%{
transform: translateY(0);
}
}
var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = '.moveUp{background-color:red; width:40px;height:40px;margin:auto;margin-top:3em;animation: moveDown 1s;}@keyframes moveDown{50% {transform: translateY(200px);}100%{transform: translateY(0);}}' var moveUp = document.querySelectorAll('.moveUp') document.getElementsByTagName('head')[0].appendChild(style)
<div class="moveUp"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.