html 按钮进行翻转并向不同方向移动

Posted 2021-05-10

function addMotionBtnEvent(){

	var btns = document.querySelectorAll('.btn-motion');
	if(!btns) return false;
	
	for (let i=0; i<btns.length; i++ ){
		let btn = btns[i],
			btnBg = btn.querySelector('.bg'),
			btnCls = btn.classList,
			outFunc = function() {
				btnBg.addEventListener('animationend', outAnimCallback);
				btnCls.add("do-hover-out");
			},
			outAnimCallback = function() {
				btnBg.removeEventListener('animationend', outAnimCallback);
				setTimeout(function(){
					btnCls.remove("do-hover-out");
				},10);
			};

		btn.addEventListener('mouseleave', outFunc, false);
	};
	
}

addMotionBtnEvent();

	
	$ease:cubic-bezier(.01, .67, .25, 1);
	$ease2:cubic-bezier(.58,.34,.05,.98);
	$ease-back:cubic-bezier(0.175, 0.885, 0.32, 1.03);
	$ease-out-expo:cubic-bezier(0.19, 1, 0.22, 1);
	$ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);
	$ease-in-out-expo:cubic-bezier(1, 0, 0, 1);
	$ease-in-out-quint:cubic-bezier(0.86, 0, 0.07, 1);
	$ease-in-out-quart:cubic-bezier(0.77, 0, 0.175, 1);
	$sk:20deg;
	
	//リンクボタン
	.btn-motion  { width: 200px; padding: 20px 0;  position: relative; line-height: 1; text-align: center; letter-spacing: 2px; text-decoration: none; border: 1px solid black; transition:.2s ease-out border-color; cursor: pointer;
		.txt { position: relative; z-index: 1; transition:.3s ease-in-out color;}
		.bg { content:''; @include wh(100%,100%); @include top-left(0,0,0); background: #000; transform: scaleX(0); transform-origin: right top; }
		&:hover { border-color: rgba(0, 0, 0, 0);
			.txt{ color: white; }
			.bg { animation: btn-motion-over .4s $ease-in-out-expo; animation-fill-mode: forwards; }
		}
		&.do-hover-out { border-color:black;
			.bg { animation: btn-motion-out .4s $ease-in-out-quint; }
		}
		
		//右から左へ
		&--left { overflow: hidden;
			.bg { transform: scaleX(0) }
			&:hover {
				.bg { animation: btn-motion-over-left .4s $ease-in-out-expo forwards;}
			}
			&.do-hover-out {
				.bg { animation: btn-motion-out-left .4s $ease-in-out-quint; }
			}
		}

		//スケールの処理
		&--scale {
			.bg { transform: scale(.5); transform-origin: center center; opacity: 0; }
			&:hover {
				.bg { animation: btn-motion-over-scale .4s $ease-in-out-quint forwards; }
			}
			&.do-hover-out {
				.bg { animation: btn-motion-out-scale .4s $ease-in-out-quint; }
			}
		}

	}
	

	@keyframes btn-motion-over{
		0% { transform: scaleX(0); transform-origin: left top }
		100% { transform: scaleX(1);  transform-origin: left top }
	}
	@keyframes btn-motion-out{
		0% { transform: scaleX(1); transform-origin: right top;}
		100% { transform: scaleX(0);transform-origin: right top;}
	}

	@keyframes btn-motion-over-left{
		0% { transform: scaleX(0); transform-origin: right top }
		100% { transform: scaleX(1);  transform-origin: right top }
	}
	@keyframes btn-motion-out-left{
		0% { transform: scaleX(1); transform-origin: left top;}
		100% { transform: scaleX(0);transform-origin: left top;}
	}
	
	@keyframes btn-motion-over-scale{
		0% { transform: scale(.5); opacity: 0; }
		100% { transform: scale(1); opacity: 1; }
	}
	@keyframes btn-motion-out-scale{
		0% { transform: scale(1); opacity: 1; }
		100% { transform: scale(1); opacity: 0;}
	}

<div class="btn-motion"><span class="txt">button</span><span class="bg"></span></div>
<div class="btn-motion btn-motion--left"><span class="txt">button</span><span class="bg"></span></div>
<div class="btn-motion btn-motion--scale"><span class="txt">button</span><span class="bg"></span></div>