?> 背景知识：:point_right: animation, transition
一切的过度皆应该由动画来完成
<script v-pre type="text/x-template" id="elastic-animation"> <style> main { width: 100%; height: 229px; display: flex; } label { margin: auto; } input { display: block; width: 229px; padding: .8em; outline: none; border: 1px solid #e3e3e3; border-radius: 2px; } input:hover { border: 1px solid #b4a078; } input:focus { border: 1px solid #b4a078; box-shadow: 0 0 0 2px rgba(180, 160, 120, 0.2); } .poptip { display: inline-block; width: 236px; font-size: 13px; padding: .6em; background: #fafafa; position: relative; margin-left: -3px; margin-top: 3px; border-radius: 2px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .23456)); transform-origin: 15px -6px; } .poptip::before { content: ""; position: absolute; top: -6px; left: 10px; border: 9px solid transparent; border-bottom-color: #fafafa; border-top-width: 0; } input:not(:focus) + .poptip{ transform: scale(0); animation: elastic-dec .25s; } input:focus + .poptip{ transform: scale(1); animation: elastic-grow .45s; } @keyframes elastic-grow{ from { transform: scale(0); } 70% { transform: scale(1.1); animation-timing-function: cubic-bezier(.1, .25, .1, .25); } } @keyframes elastic-dec{ from { transform: scale(1); } to { transform: scale(0); animation-timing-function: cubic-bezier(.25, .1, .25, .1); } } </style> 用户名: 仅支持字母、数字和下划线组合！ <script> </script> </script>
animation方案 👍
<script v-pre type="text/x-template" id="elastic-transtion"> <style> main { width: 100%; height: 229px; display: flex; } label { margin: auto; } input { display: block; width: 229px; padding: .8em; outline: none; border: 1px solid #e3e3e3; border-radius: 2px; } input:hover { border: 1px solid #b4a078; } input:focus { border: 1px solid #b4a078; box-shadow: 0 0 0 2px rgba(180, 160, 120, 0.2); } input:not(:focus) + .poptip { transform: scale(0); transition: transform .25s cubic-bezier(.25, .1, .25, .1); } input:focus + .poptip { transform: scale(1); transition: transform .4s cubic-bezier(.29, .15, .5, 1.46); } .poptip { display: inline-block; width: 236px; font-size: 13px; padding: .6em; background: #fafafa; position: relative; margin-left: -3px; margin-top: 3px; border-radius: 2px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .23456)); transform-origin: 15px -6px; } .poptip::before { content: ""; position: absolute; top: -6px; left: 10px; border: 9px solid transparent; border-bottom-color: #fafafa; border-top-width: 0; } </style> 用户名: 仅支持字母、数字和下划线组合！ <script> </script> </script>三次贝塞尔
cubic-bezier+transition方案
三次贝塞尔曲线cubic-bezier主要是为animation生成速度曲线的函数，语法是cubic-bezier(<x1>, <y1>, <x2>, <y2>)，更多请参考：Lea Verou的图形化工具cubic-bezier