vue笔记(3)动画

最新推荐文章于 2020-12-10 15:43:49 发布

Ron韦斯莱

最新推荐文章于 2020-12-10 15:43:49 发布

阅读量224

点赞数

本文链接：https://blog.csdn.net/qq_43537987/article/details/93403565

版权

本文详细介绍了如何在Vue中实现动画效果，包括使用过渡类名、自定义V-前缀、结合animate.css、设置动画时间和利用钩子函数。通过小球掉落案例深入解析了transition-group的使用，探讨了v-move、appear和tag属性的应用，并展示了不同配置下列表项动画添加删除的实现。

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

vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865
vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293

Vue动画

使用过渡类名实现一个简单动画

在这里插入图片描述

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

v-enter 【这是一个时间点】，是进入之前，元素的起始状态，此时还没有开始进入

v-leave-to 【这是一个时间点】，是动画离开之后，离开的阻止状态，此时，元素动画已经结束

v-enter-active 【入场动画的时间段】

v-leave-active 【入场动画的时间段】

案例：

<script src="js/vue-2.4.0.js"></script>
  <style>
    .v-enter,
    .v-leave-to{
   
      opacity: 0;
    }
    .v-enter-active,
    .v-leave-active{
   
      -webkit-transition: all 1s linear;
      -moz-transition: all 1s linear ;
      -ms-transition: all 1s linear;
      -o-transition: all 1s linear ;
      transition: all 1s linear;
    }
  </style>
</head>
<body>
<div id="app">
  <input type="button" value="显示" @click="show">
  <transition>
    <h3 v-if="flag">{
   {
   msg}}</h3>
  </transition>
</div>
<script>
    var vm = new Vue({
   
        el: '#app',
        data: {
   
            msg: 'hello world',
            flag: false
        },
        methods: {
   
            show() {
   
                this.flag = !this.flag;
            }
        }
    })
</script>

修改并自定义V-前缀

 <transition name="my">
    <h4 v-if="flag2">我是你爸爸</h4>
 </transition>

在transition中添加name属性，并以name 的属性值作为前缀

 .my-enter,
    .my-leave-to{
    opacity: 0;
    transform: translateY(100px);
 }
 .my-enter-active,
 .my-leave-active{
    transition: all 1s linear;
 }

案例：

<script src="js/vue-2.4.0.js"></script>
  <style>
    .v-enter,
    .v-leave-to {
   
      opacity: 0;
      transform: translateX(100px);
    }
    .v-enter-active,
    .v-leave-active {
   
      transition: all 1s linear;
    }
    .my-enter,
    .my-leave-to{
   
      opacity: 0;
      transform: translateY(100px);
    }
    .my-enter-active,
    .my-leave-active{
   
      transition: all 1s linear;
    }
  </style>
</head>
<body>
  <div id="app">
    <inp

最低0.47元/天解锁文章

Ron韦斯莱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue笔记(3)动画

vue笔记(1)初识部分: https://blog.csdn.net/qq_43537987/article/details/93402865vue笔记(2)vue中ajax:https://blog.csdn.net/qq_43537987/article/details/93403293Vue动画使用过渡类名实现一个简单动画https://cn.vuejs.org/v2/guid...
复制链接

扫一扫