Transition on javascript funtion

问题

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>

回答1:

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>

If you want to do it with jquery only then you can use it like this .addClass( className [, duration ] [, easing ] [, complete ] )

NOTE: But you've to add jquery-ui.js file to make it work.

<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>

回答2:

Try this

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
    border: 1px solid black;
    background-color: lightblue;
    width: 270px;
    height: 200px;
    overflow: auto;
}

#myDIV:hover {
    background-color: coral;
    width: 570px;
    height: 500px;
    padding: 100px;
    border-radius: 50px;
}
</style>
</head>
<body>



<div id="myDIV">
  <h1>myDIV</h1>
</div>

<script>

    document.getElementById("myDIV").style.WebkitTransition = "all 2s"; // Code for Safari 3.1 to 6.0
    document.getElementById("myDIV").style.transition = "all 2s";       // Standard syntax

</script>
</body>
</html>

来源：https://stackoverflow.com/questions/47115386/transition-on-javascript-funtion

标签

javascript

html

css

transitions