vue动画-走马灯和列表增加删除元素

最新推荐文章于 2024-01-16 11:35:51 发布

Smile_DaLin

最新推荐文章于 2024-01-16 11:35:51 发布

阅读量341

点赞数

文章标签： vue效果

本文链接：https://blog.csdn.net/Smile_DaLin/article/details/97291338

版权

本文介绍如何在Vue项目中实现走马灯效果，并探讨在列表增删元素时如何添加平滑过渡动画，提升用户体验。通过Vue的transition组件和CSS动画，详细讲解了关键步骤和注意事项。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
  <title>Document</title>
</head>
<style>
  .box {
    margin: 100px;
    width: 100px;
    height: 150px;
    background-color: red;
  }

  .mymy-enter-to,
  .mymy-enter-leave-to {
    transform: translateX(100px)
  }

  .mymy-enter-active,
  .mymy-leave-active {
    transition: all 10s ease
  }

  li {
    width: 100px;
    height: 40px;
    border: red 1px dashed;
    margin: 10px;
  }

  li:hover {
    background-color: red;
    transition: all 1s ease-in;
  }

  .list-enter,
  .list-leave-to {
    o