vue 動畫 —— 滾動動畫
阿新 • • 發佈:2021-02-07
要點
滾動動畫包含兩種變化:
(1)位置變化
transform: translate(-100%);
(2)沿z軸(垂直於螢幕方向)旋轉
transform: rotate3d(0, 0, 1, -360deg);
完整範例程式碼
<template> <div> <button @click="show = true">點我滾入</button> <button @click="show = false">點我滾出</button> <transition enter-active-class="rollIn" leave-active-class="rollOut" > <div v-show="show" class="circle200">滾動動畫</div> </transition> </div> </template> <script> export default { data() { return { show: false } }, } </script> <style scoped> .circle200 { height: 200px; width: 200px; background: red; border-radius: 50%; text-align: center; line-height: 200px; } /*滾入——從左側*/ @keyframes rollIn { 0% { opacity: 0; transform: translate(-100%) rotate3d(0, 0, 1, -360deg); } 100% { opacity: 1; } } /*滾出——從左側*/ @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; transform: translate(-100%) rotate3d(0, 0, 1, -360deg); } } /*滾入——從左側*/ .rollIn { animation: rollIn 1s; } /*滾出——從左側*/ .rollOut { animation: rollOut 1s; } </style>