新增CSS过渡时间使用javascript

2013-11-20 53 views 2 likes

切换类我想一个过渡时间添加到我的纯JavaScript切换类功能我知道如何代码，但我忘了，现在需要一些建议新增CSS过渡时间使用javascript

<!DOCTYPE html> 
<html> 
<head> 

<style type="text/css"> 
#div{ 
    width: 200px; 
    height: 150px; 
} 
.class1 { 
    color: #f00; 
    background-color: #2fadac; 
} 

.class2 { 
    color: #00f; 
    background-color: #c33; 
} 
</style> 
</head> 
<body> 
<div id="div" class="class1">click here</div> 
<script> 
function classToggle() { 
    this.classList.toggle('class1'); 
    this.classList.toggle('class2'); 
    style.cssText ="-webkit-transition: all 0.5s ease-in-out;"; 
} 
document.querySelector('#div').addEventListener('click', classToggle); 
</script> 
</body> 
</html>

任何帮助将不胜感激

来源

2013-11-20 user2906766

回答

尝试添加您的目标类本身的过渡规则。

.class1 { 
    color: #f00; 
    background-color: #2fadac; 
    -webkit-transition: all 0.5s ease-in-out; 
} 

.class2 { 
    color: #00f; 
    background-color: #c33; 
    -webkit-transition: all 0.5s ease-in-out; 

}

Demo

或者只是应用该规则在一个单独的规则：

CSS： -

.class1 { 
    color: #f00; 
    background-color: #2fadac; 
} 

.class2 { 
    color: #00f; 
    background-color: #c33; 
} 
.transition{ 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition:all 0.5s ease-in-out; 
    -o-transition:all 0.5s ease-in-out; 
    transition:all 0.5s ease-in-out; 
}

HTML：

<div id="div" class="class1 transition">click here</div>

Demo

来源

2013-11-20 15:13:54 PSL

增加您的CSS过渡

#div{ 
    width: 200px; 
    height: 150px; 
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -ms-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
}

DEMO

来源

2013-11-20 15:14:54 Anon

新增CSS过渡时间使用javascript

回答

相关问题