JS 怎么动态设置CSS3动画的样式_IT百科

引入jquery

然后给你要设置动画的对象增加或者删除css3动画的类就可以了。

如我这里用colorchange这个渐变类在css里面写好动画效果以后在js里面给对象添加上就可以实现动画了

<!DOCTYPE html>

<html>

body{

padding: 20px

background-color:#FFF

}

.colorchange

{

animation:myfirst 5s

-moz-animation:myfirst 5s /* Firefox */

-webkit-animation:myfirst 5s /* Safari and Chrome */

-o-animation:myfirst 5s /* Opera */

}

@keyframes myfirst

{

from {background:red}

to {background:yellow}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background:red}

to {background:yellow}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {background:red}

to {background:yellow}

}

@-o-keyframes myfirst /* Opera */

{

from {background:red}

to {background:yellow}

}

#main{

width:100px

height:100px

background:red

}

#cgbt{

width: 100px

margin: 20px 0 0 0

text-align: center

cursor: pointer

}

#cgbt:hover{

background-color: #2D93CA

}

</style>

</head>

<body>

我会变么？

</div>

点我让上面的变颜色

</div>

$(document).ready(function(){

$("#cgbt").click(function(){

$("#main").attr("class","colorchange")

})

</script>

</body>

</html>

有时候WEB开发人员认为CSS的动画比JavaScript的动画更难理解。虽然CSS动画有其局限性，但它的性能比大多数JavaScript库更加高效，因为它可以借助硬件加速啊！其效果绝对可以超出我们的预期。

CSS animations和transitions再加上点JavaScript就可以实现硬件加速动画，而且其交互效果比大多数JavaScript库更高效。

So，让我们快点开始吧！小伙伴们都等不及了！

注意：Animations(动画)和Transitions(过渡)是不同的

CSS Transitions(过渡)被应用于元素指定的属性变化时，该属性经过一段时间逐渐的过渡到最终需要的值；而CSS Animations(动画)只是在应用时执行之前定义好的 *** 作，它提供更细粒度的控制。

在这篇文章中，我们将分别针对上述内容进行讲解。

控制CSS Transition(过渡)

在编程论坛中，关于transition(过渡)的触发和暂停有无数的疑问。使用JavaScript可以很容易的解决这些疑问。

如何触发元素的transiton(过渡)？切换元素的类名可以触发该元素的transition(过渡)

如何暂停元素的transition(过渡)？在你想要暂停过渡点，用getComputedStyle和getPropertyValue获取该元素相应的CSS属性值，然后设置该元素的对应的CSS属性等于你刚才获取到的CSS属性值。

以下是该方法的一个例子。

<!DOCTYPE html>

<html>

<head>

<title> *** 作transtition</title>

.box {

margin: 30px

height: 50px

width: 50px

background-color: blue

}

.box.horizTranslate {

-webkit-transition: 3s

-moz-transition: 3s

-ms-transition: 3s

-o-transition: 3s

transition: 3s

margin-left: 50% !important

}

</style>

</head>

<body>

<h3>Pure Javascript</h3>

<h3>jQuery</h3>

var boxOne = document.getElementsByClassName('box')[0],

boxTwo = $(".box:eq(1)")

document.getElementsByClassName('toggleButton')[0].onclick = function(){

if(this.innerHTML === 'Play'){

this.innerHTML = 'Pause'

boxOne.classList.add('horizTranslate')

}else{

this.innerHTML = 'Play'

var computedStyle = window.getComputedStyle(boxOne),

marginLeft = computedStyle.getPropertyValue("margin-left")

boxOne.style.marginLeft = marginLeft

boxOne.classList.remove('horizTranslate')

}

$('.toggleButton:eq(1)').on('click',function(){

if($(this).html() === 'Play'){

$(this).html('Pause')

boxTwo.addClass('horizTranslate')

}else{

$(this).html('Play')

var computedStyle = boxTwo.css('margin-left')

boxTwo.css('margin-left',computedStyle)

boxTwo.removeClass('horizTranslate')

}

})

</script>

</body>

</html>

执行效果：http://cdpn.io/GokAm

同样的技术可以用在更高级的方法上。下面的例子也是通过改变类名来触发元素的transition(过渡)，但这次可以跟踪当前的缩放率。

<!DOCTYPE html>

<html>

<head>

<title> *** 作transtition</title>

.zoomPic {

margin: 30px

width: 300px

height: 180px

background-color: blue

background-image: url(http://placehold.it/1200x720)

background-repeat:no-repeat

background-position:50% 50%

background-size: 300px 180px

-webkit-transition: all 2.5s ease-in-out

-moz-transition: all 2.5s ease-in-out

-ms-transition: all 2.5s ease-in-out

-o-transition: all 2.5s ease-in-out

transition: all 2.5s ease-in-out

}

.zoomPic.zoom {

background-size: 1200px 720px !important

}

</style>

</head>

<body>

<h3>Pure Javascript</h3>

<button class='pause'>Pause</button>

<h3>jQuery</h3>

<button class='pause'>Pause</button>

var zoomOne = document.getElementsByClassName('zoomPic')[0],

zoomOneBgSize = window.getComputedStyle(zoomOne).getPropertyValue('background-size'),

zoomTwo = $(".zoomPic:eq(1)"),

zoomTwoBgSize = zoomTwo.css('background-size')

// zoomOne:zoom

document.getElementsByClassName('zoom')[0].onclick = function(){

if(!zoomOne.classList.contains('zoom')){

zoomOne.classList.add('zoom')

}

// zoomOne:pause

document.getElementsByClassName('pause')[0].onclick = function(){

var computedStyle = window.getComputedStyle(zoomOne),

backgroundSize = computedStyle.getPropertyValue("background-size")

zoomOne.style.backgroundSize = backgroundSize

zoomOne.classList.remove('zoom')

}

// zoomOne:zoomout

document.getElementsByClassName('zoomout')[0].onclick = function(){

zoomOne.classList.remove('zoom')

zoomOne.style.backgroundSize = zoomOneBgSize

}

// zoomTwo:zoom

$('.zoom:eq(1)').on('click',function(){

if(!zoomTwo.hasClass('zoom')){

zoomTwo.addClass('zoom')

}

})

// zoomTwo:pause

$('.pause:eq(1)').on('click',function(){

var computedStyle = zoomTwo.css('background-size')

zoomTwo.css('background-size',computedStyle)

zoomTwo.removeClass('zoom')

})

// zoomTwo:zoomout

$('.zoomout:eq(1)').on('click',function(){

zoomTwo.removeClass('zoom')

zoomTwo.css('background-size',zoomTwoBgSize)

})

</script>

</body>

</html>

转载仅供参考，版权属于原作者。祝你愉快，满意请采纳哦

简单的不用js就行

<!DOCTYPE HTML>

<html>

<head>

<title>untitled</title>

margin: 0px

padding: 0px

}

#a{

position: absolute

width: 50px

height: 50px

background-color: #f3e9e0

border-radius: 50%

left: 400px

top: 200px

}

#a div{

position: absolute

width: 50px

height: 50px

border-radius: 50%

transition: all 0.5s

left: 0px

top: 0px

}

#a :nth-child(1){

background-color: #c1d4ed

}

#a :nth-child(2){

background-color: #7d6e69

}

#a :nth-child(3){

background-color: #dad6d5

}

#a :nth-child(4){

background-color: #caaa9d

}

#a :nth-child(5){

background-color: #6bdeff

}

#a:hover :nth-child(1){

left: 150px

top: -150px

}

#a:hover :nth-child(2){

left: 150px

top: 150px

}

#a:hover :nth-child(3){

left: 300px

top: -150px

}

#a:hover :nth-child(4){

left: 300px

top: 150px

}

#a:hover :nth-child(5){

left: 450px

top: 0px

}

</style>

</head>

<body>

</div>

</body>

</html>

鼠标伸到球上自动扩散移动

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/bake/11738579.html

JS 怎么动态设置CSS3动画的样式

发表评论

评论列表（0条）