javascript 功能上的转换 [英] Transition on javascript funtion
本文介绍了javascript 功能上的转换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以在 javascript 函数中添加过渡效果，例如 CSS 过渡效果?在代码片段中，单击按钮时背景颜色会发生淡入淡出的效果.
Is it possible to add transitions in javascript functions such as CSS transitions? On the snippet it would be the fading effect on background changing colors when clicking the buttons.
$("#btn1").click(function() {
$('body').removeClass();
$('body').addClass('class1');
});
$("#btn2").click(function() {
$('body').removeClass();
$('body').addClass('class2');
});
$("#btn3").click(function() {
$('body').removeClass();
$('body').addClass('class3');
});body {align-items: center;
justify-content: center;
text-align: center;
}
body.class1 {
background-color: red;
}
body.class2 {
background-color: green;
}
body.class3 {
background-color:powderblue;
}
button {padding: 15px 32px;
margin: 80px 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="class1">
<button id="btn1">RED</button>
<button id="btn2">GREEN</button>
<button id="btn3">BLUE</button>
</body>推荐答案
像这样在 CSS 本身中添加过渡.
Just Add transition in the CSS itself like this.
$("#btn1").click(function() {
$('body').removeClass();
$('body').addClass('class1');
});
$("#btn2").click(function() {
$('body').removeClass();
$('body').addClass('class2');
});
$("#btn3").click(function() {
$('body').removeClass();
$('body').addClass('class3');
});body {
align-items: center;
justify-content: center;
text-align: center;
}
body.class1 {
background-color: red;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
body.class2 {
background-color: green;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
body.class3 {
background-color: powderblue;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
button {
padding: 15px 32px;
margin: 80px 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="class1">
<button id="btn1">RED</button>
<button id="btn2">GREEN</button>
<button id="btn3">BLUE</button>
</body>如果你想用 jquery only 那么你可以像这样使用它 .addClass( className [, duration ] [, easing ] [, complete ] )
If you want to do it with jquery only then you can use it like this .addClass( className [, duration ] [, easing ] [, complete ] )
注意:但是您必须添加 jquery-ui.js 文件才能使其工作.
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$("#btn1").click(function() {
$('body').removeClass();
$('body').addClass('class1',1000, "easeOutBounce" );
});
$("#btn2").click(function() {
$('body').removeClass();
$('body').addClass('class2',1000, "easeOutBounce" );
});
$("#btn3").click(function() {
$('body').removeClass();
$('body').addClass('class3',1000, "easeOutBounce" );
});body {align-items: center;
justify-content: center;
text-align: center;
}
body.class1 {
background-color: red;
}
body.class2 {
background-color: green;
}
body.class3 {
background-color:powderblue;
}
button {padding: 15px 32px;
margin: 80px 10px;
font-size: 16px;
border-radius: 12px;
border: 2px solid black;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<body class="class1">
<button id="btn1">RED</button>
<button id="btn2">GREEN</button>
<button id="btn3">BLUE</button>
</body>这篇关于javascript 功能上的转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
