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：想單擊按鈕動畫

回答

相關問題