| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- .my-div {
- width: 200px;
- height: 100px;
- background-color: lightblue;
- position: absolute;
- top: 50px;
- left: 50px;
- transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
- /* 添加过渡效果 */
- }
- .hidden {
- transform: translateX(-100%);
- /* 移出屏幕左侧 */
- opacity: 0;
- /* 完全透明 */
- }
- </style>
- </head>
- <body>
- <div class="my-div" id="myDiv">
- 这是一个需要移出屏幕的 div。
- </div>
- <button onclick="moveDiv()">移出 div</button>
- <script>
- function moveDiv() {
- const div = document.getElementById('myDiv');
- div.classList.add('hidden'); // 添加 hidden 类，触发动画
- // 动画结束后隐藏元素
- setTimeout(() => {
- div.style.display = 'none';
- }, 500); // 过渡动画持续 0.5 秒
- }
- </script>
- </body>
- </html>
|
