vue过度动画基础，结合animate.css库使用

最新推荐文章于 2023-09-06 11:46:07 发布

宁长风

最新推荐文章于 2023-09-06 11:46:07 发布

阅读量250

点赞数 1

分类专栏： Vue css3 文章标签： css3 vue

本文链接：https://blog.csdn.net/weixin_43663775/article/details/109553349

版权

Vue 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

css3

9 篇文章 0 订阅

订阅专栏

先附上vue官方文档，基础部分有需要的朋友自己看下：
vue官方动画基础
如果没看懂官方文档的，可以再看下我改的小demo：
这部分已熟悉的可以跳过这一段，看最下面的
上效果

animate.css效果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 190px;
            height: 190px;
            background: orange;
        }
        .don-enter-active {
            transition: opacity 2s; 
        }
        .don-enter {
            opacity: 0.01;
            background: orange;
        }


        .don-leave-active {
            transition: opacity 2s;
        }
        .don-leave-to  {
            opacity: 0.01;
        }

    </style>
</head>
<body>
    <div id="demo">
        <button v-on:click="show = !show">
          Toggle
        </button>
        <transition name="don">
          <p v-if="show">hello</p>
        </transition>
        
       
      </div>                        
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#demo',
        data: {
            show: true
        }
    })
</script>

嗯，从这里开始，没错：
animate.css库这个可以一会看，先把下面代码跑一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 这里引入animate.css -->
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
    <style>
        p{
            width: 190px;
            height: 190px;
            background: orange;
        }
    </style>
</head>
<body>
    <div id="demo">
        <button v-on:click="show = !show">
          Toggle
        </button>                                         
                                                          <!-- 替换这里即可 -->                                  <!-- 替换这里即可 -->
        <transition enter-active-class="animate__animated animate__flash" leave-active-class="animate__animated animate__bounce">
            <p v-if="show">我年各省的发生的</p>
        </transition>
       
      </div>                        
</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#demo',
        data: {
            show: true
        }
    })
</script>

宁长风

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue过度动画基础，结合animate.css库使用

先附上vue官方文档，基础部分有需要的朋友自己看下：https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E5%8A%A8%E7%94%BB如果没看懂官方文档的，可以再看下我改的小demo：这部分已熟悉的可以跳过这一段，看最下面的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="v
复制链接

扫一扫