欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3 动画工具 Animate.css

程序员文章站 2022-03-16 19:10:27
...

Animate.css官网:https://animate.style/

css3 动画工具 Animate.css


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>

<body>
    <h1 class="animate__animated animate__bounce">An animated element</h1>
</body>

</html>

在 vue 中使用
// index 中 走cdn 加速

    <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

// App.vue

  <transition
    name="custom-classes-transition"
    enter-active-class="animated bounce"
    leave-active-class="animated bounceOutRight"
  >
      <router-view></router-view>
      <router-view class="view two" name="a"></router-view>
      <router-view class="view three" name="b"></router-view>
  </transition>

参考:https://cn.vuejs.org/v2/guide/transitions.html

相关标签: css