vue学习笔记（五）---- vue动画

最新推荐文章于 2023-05-16 10:50:01 发布

杨贵妃会飞飞飞

最新推荐文章于 2023-05-16 10:50:01 发布

阅读量209

点赞数

分类专栏： Vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_45103612/article/details/109141035

版权

Vue学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

官方文档：https://cn.vuejs.org/v2/guide/transitions.html

一、使用过度类名

在这里插入图片描述

没有使用动画之前：

<body>

<div id="app">

    <input type="button" value="切换" @click="flag=!flag"/>
    <h4>{{flag}}</h4>

</div>
<script>
  var vm = new Vue({
      el:'#app',
      data:{
          flag:false
      }
  })
</script>
</body>

来吧展示：
在这里插入图片描述
使用动画之后：

把要实现动画的元素，使用 transition 元素包裹起来
要实现动画的元素，必须使用 v-if 或 v-show 来进行控制

<input type="button" value="切换" @click="flag=!flag"/>
<transition>
   <h4 v-show="flag">{{flag}}</h4>
</transition>

添加过度动画的类名

<style>
.v-enter,
.v-leave-to {
 opacity:0;
 transform:translateX(100px);
 }
.v-enter-active,
.v-leave-active{
 transition: all 0.5s ease;
 }
</style>

来吧展示：
在这里插入图片描述

二、vue结合第三方css动画样式库

animate官网：https://animate.style/
在这里插入图片描述

安装

在官网直接下载文件
通过 npm 安装

$ npm install animate.css --save

使用

导入第三方动画样式文件

<link rel="stylesheet" href="../lib/animate.css">

在vue提供的trisition标签中添加自带的动画入场和出场的属性
添加animate样式库的动画样式值
给要做动画的标签（这里是h3）添加animate做动画的类

 <!--    enter-active-class  动画入场的时候的动画类名-->
<!--    leave-active-class动画出场时候的动画类名-->
<transition enter-active-class="animate__bounceInDown" leave-active-class="animate__bounceOutDown">
    <h3 v-show="flag" class="animate__animated">哈哈哈哈哈哈哈</h3>
</transition>

来吧展示：
在这里插入图片描述

三、动画钩子函数实现小球半场动画

<style>
        .ball{
            width: 30px;
            height: 30px;
            background-color: red;
            border-radius: 50%;
        }
</style>

<body>
<div id="app">
    <input type="button" value="加入购物车" @click="flag=!flag"/>
    <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">
        <div v-show="flag" class="ball"></div>
    </transition>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            flag:false
        },
        methods:{
            beforeEnter(el){//小球开始动画之前的起始状态
           // el标识的是绑定动画的元素这里是小球的<div>
                el.style.transform = 'translate(0,0)'
            },
            enter(el,done){// 小球动画结束之后的结束状态
                el.offsetWidth
               //el.offsetHeight/el.offsetLeft/el.offsetRight都可以实现动画效果
              // 这是固定写法，如果不写 el.offsetWidth 就无法实现动画效果，小球直接到结束状态，中间看不到动画效果
                el.style.transform = 'translate(150px,200px)'
                el.style.transition = 'all 1s ease'
                 // 当动画执行完毕后，会自动调用 done 这个函数，这个done 就是 afterEnter 函数的引用
                done()
                //调这个函数的作用是当小球结束了再次点击加入车能够再次执行动画
            },
            afterEnter(el){// 小球动画结束之后的回调函数，用来做一些清理工作
          // 通过取非的操作，直接让小球跳过了后半场的动画
                this.flag = !this.flag
            }
        }
    })
</script>
</body>

来吧展示：

在这里插入图片描述

四、列表动画

基本样式：

  <style>
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        li {
            line-height: 30px;
            border: 1px dashed #ccc;
            margin: 5px;
            font-size: 14px;
            padding-left: 10px;
            width: 500px;
            cursor: pointer;
        }
        li:hover {
            background-color: orange;
            box-shadow: 0 0 7px gray;
        }
    </style>

<body>
<div id="app">
    <ul>
        <li v-for="item in list">{{item.id}}  ------ {{item.name}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            list: [
                { id: 1, name: '黄焖鸡'},
                { id: 2, name: '烤鱼'},
                { id: 3, name: '鸭血粉丝'},
                { id: 4, name: '大碗米线'},
                { id: 5, name: '螺蛳粉'},
                { id: 6, name: '鱼香肉丝'},
            ]
        }
    })
</script>
</body>

来吧展示：
在这里插入图片描述
实现删除功能

<ul>
  <li v-for="(item, i) in list"  @click="del(i)">{{item.id}}  ------ {{item.name}}
  </li>
</ul>

methods:{
     del(i){
        this.list.splice(i,i)
         }
  }

来吧展示：
在这里插入图片描述

实现删除动画

<style>
.....
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateY(200px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }
</style>

<div id="app">
        <transition-group tag="ul">
<!--因为transition-group默认被渲染的成sapn，但是行内元素不能再套块级元素，不符合css3规范，所以将ul移除，然后给transition-group添加tag="ul"-->
            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">{{item.id}}  ------ {{item.name}}</li>
 <!--在transition-group中被v-for包裹的循环元素必须绑定:key=""属性-->
        </transition-group>
</div>

来吧展示：
在这里插入图片描述
实现删除列表时，让下面的元素慢慢上去，有过度效果，变得没有那么生硬

<style>
.....
        .v-move { /* 让元素被改变定位的时候，有一个缓动的效果 */
            transition: all 0.5s ease;
        }
        .v-leave-active { 
            position: absolute;
        /* 表示要被删除的那个元素， 让即将被移除的元素，脱离标准流
        这样，后面的元素就能渐渐的浮动上来了 
        也就是说页面上的li属于流式布局,那怕做动画效果,li也会占领自己的区域
        如果说为将要删除的元素添加position:absolute那么就脱离了标准流,就不会再占位置了
        后面的元素就会慢慢票上去 */
    }
</style>

来吧展示：

在这里插入图片描述
实现添加功能：

<div>
      Id：<input type="text" v-model="id">
      Name：<input type="text" v-model="name">
      <input type="button" value="添加" @click="add">
    </div>

data:{
     id:'',
     name:'',
     list: [
     ......
      ]
    }

add(){
  const p = { id: this.id, name: this.name }
  //往后追加
  this.list.push(p)
  //往前追加
  //this.list.unshif(p)
  this.id = this.name = ''
 }

来吧展示：
在这里插入图片描述

杨贵妃会飞飞飞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录