javascript函数和HTML中的文本转换/动画onclick

Text transition/animation onclick in javascript function and HTML

本文关键字：转换 动画 onclick 文本 函数 HTML javascript      更新时间：2023-09-26

我有一个按钮在点击时触发此功能：

<button onclick="showAdvice()">Advice!</button>
<p id="text"></p>
<script>
    function showAdvice() {
        var advices = ["1","2","3"];
        var choose = Math.floor(Math.random() * advices.length);
        document.getElementById("text").innerHTML = advices[choose];
    }
</script>

onclick动作在"文本"段落中生成建议，它们以随机顺序出现。我希望它们在不透明度、淡出/淡入之间进行转换。我如何在CSS/JavaScript中实现这一点？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
	<style type="text/css" media="screen">
		#pContainer {
			position: relative;
			overflow: hidden;
			width: 200px;
			height: 200px;
		}
		#pContainer > p {
			position: absolute;
			top: 0;
			left: 0;
			transition: opacity 0.5s linear;
		}
		#pContainer > p.show {
			opacity: 1;
		}
		#pContainer > p.hide {
			opacity: 0;
		}
	</style>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<button onclick="showAdvice()">Advice!</button>
	<div id="pContainer">
    	<p id="text" class="show"></p>
    	<p id="text02" class="hide"></p>
	</div>
    <script>
		function showAdvice() {
		    var advices = ["1","2","3"];
	        var choose = Math.floor(Math.random() * advices.length);
	        $('#pContainer p.hide')
	        	.text(advices[choose])
	        	.removeClass('hide')
	        	.addClass('show')
	        	.siblings('p')
	        	.removeClass('show')
	        	.addClass('hide');
		}
	</script>
</body>
</html>

您可以使用jquery创建动画。

function showAdvice() {
    $("#text").hide();
  var advices = ["1", "2", "3"];
  var choose = Math.floor(Math.random() * advices.length);
  document.getElementById("text").innerHTML = advices[choose];
  $("#text").fadeIn();
}

示例：https://jsfiddle.net/90mxq8bf/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
	<style type="text/css" media="screen">
		#pContainer {
			position: relative;
			overflow: hidden;
			width: 200px;
			height: 100px;
		}
		#pContainer > p {
			position: absolute;
			top: 0;
			left: 0;
			/* transition: opacity 0.5s linear; */
		}
		#pContainer > p.show {
			/* opacity: 1; */
			opacity: 1;
			-webkit-animation: showP 0.85s linear;
		}
		#pContainer > p.hide {
			/* opacity: 0; */
			opacity: 0;
			top: -50px;
			-webkit-animation: hideP 0.85s linear;
		}
			
			@-webkit-keyframes showP {
				0%{
					opacity: 0;
					top: -50px;
				}
				
				100%{
					opacity: 1;
					top: 0px
				}
			}
			@-webkit-keyframes hideP {
				0%{
					opacity: 1;
					top: 0px;
				}
				80%{
					opacity: 0;
				}
				90%{
					top: 105px; /* container height + 5*/
				}
				100%{
					opacity: 0;
					top: -50px;
				}
			}
	</style>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<button onclick="showAdvice()">Advice!</button>
	<div id="pContainer">
    	<p id="text" class="show"></p>
    	<p id="text02" class="hide"></p>
	</div>
    <script>
		function showAdvice() {
		    var advices = ["1","2","3"];
	        var choose = Math.floor(Math.random() * advices.length);
	        $('#pContainer p.hide')
	        	.text(advices[choose])
	        	.removeClass('hide')
	        	.addClass('show')
	        	.siblings('p')
	        	.removeClass('show')
	        	.addClass('hide');
		}
	</script>
</body>
</html>

相关文章：