Vue学习总结-动画

最新推荐文章于 2021-08-14 11:56:48 发布

frieryumao

最新推荐文章于 2021-08-14 11:56:48 发布

阅读量183

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/frieryumao/article/details/101064069

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue学习总结-动画

动画-使用过渡类名实现动画

<template>
  <div>
<!--    需求：点击h3显示，再点击h3消失-->

    <input type="button" value="点击" @click="flag=!flag">
    <transition>
      <h3 v-if="flag">这是一个H3</h3>

    </transition>

  </div>

</template>

<script>
    export default {
        // name: 'HelloWorld',
        data() {
            return {
                flag:false,
            }
        },
        methods: {

        }

    }
</script>
<style>
<!-- v-enter[时间点]，是进入之前，元素的起始状态，此时还没有开始进入 -->
  /*v-leave-to[时间点]，动画离开之后，离开的终止状态，此时元素动画结束*/
  .v-enter,
  .v-leave-to{
    opacity: 0;
    transform: translateX(130px);
  }
  /*v-enter-active[入场动画时间段]*/
  /*v-leave-active[离场动画时间段]*/
  .v-enter-active,
  .v-leave-active{
    transition: all 0.8s ease;
  }
</style>

动画-自定义v-前缀

<template>
  <div>
<!--    需求：点击h3显示，再点击h3消失-->
    <input type="button" value="点击" @click="flag=!flag">
    <transition>
      <h2 v-if="flag">这是一个H3</h2>
    </transition>
    <hr>
    <input type="button" value="点击" @click="flag2=!flag2">
    <transition name="my">
      <h6 v-if="flag2">这是一个H6</h6>
    </transition>

  </div>

</template>

<script>
    export default {
        // name: 'HelloWorld',
        data() {
            return {
                flag:false,
                flag2:false,
            }
        },
        methods: {

        }

    }
</script>
<style>
<!-- v-enter[时间点]，是进入之前，元素的起始状态，此时还没有开始进入 -->
  /*v-leave-to[时间点]，动画离开之后，离开的终止状态，此时元素动画结束*/
  .v-enter,
  .v-leave-to{
    opacity: 0;
    transform: translateX(130px);
  }
  /*v-enter-active[入场动画时间段]*/
  /*v-leave-active[离场动画时间段]*/
  .v-enter-active,
  .v-leave-active{
    transition: all 0.8s ease;
  }
.my-enter,
.my-leave-to{
  opacity: 0;
  transform: translateX(130px);
}
.my-enter-active,
.my-leave-active{
  transition: all 0.8s ease;
}
</style>

动画-使用第三方animate.css类库实现动画

import animated from 'animate.css' // npm install animate.css --save安装，再引入
Vue.use(animated)

<!--    需求：点击h3显示，再点击h3消失-->
    <input type="button" value="点击" @click="flag=!flag">
<!--    使用duration=“毫秒”统一设置入场和离场动画时长-->
<!--    <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="400">-->
<!--      <h3 v-if="flag">这是一个H3</h3>-->
<!--    </transition>-->
<!--使用:duration={enter:200,leave:400}分别设置入场和离场动画时长-->
    <transition enter-active-class=" bounceIn" leave-active-class=" bounceOut" :duration={enter:200,leave:400}>
      <h3 v-if="flag" class="animated">这是一个H3</h3>
    </transition>
  </div>

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

<template>
  <div>
    <!--    需求：点击h3显示，再点击h3消失-->
    <input type="button" value="加入购物车" @click="flag=!flag">

    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>
  </div>

</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                flag: false,

            }
        },
        methods: {
            //注意：动画钩子函数第一个参数：el要执行动画的那个DOM元素，是原生的JS DOM对象
            beforeEnter(el) {
                //表示动画入场前，此时动画尚未开始，可以在beforeEnter中设置开始动画之前的起始样式
                //    设置小球开始动画的起始位置
                el.style.transform = "translate(0,0)"
            },
            enter(el, done) {
                //没有实际作用，不写动画效果出不来，可认为会强制动画刷新
                el.offsetWidth
                //    动画开始之后的样式，可设置小球完成动画后的结束状态
                el.style.transform = "translate(150px,450px)"
                el.style.transition = 'all 1s ease'

                //done其实就是afterEnter这个函数，也就是说done是afterEnter的引用
                //动画完成后立即消失
                done()
            },
            afterEnter(el) {
                //    动画完成后调用
                this.flag = !this.flag

            }
        }

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

动画-使用transition-group元素实现列表动画

添加

<template>
  <div>
    <div>
      <label>
        Id:
        <input type="text" v-model="id">
      </label>
      <label>
        Name:
        <input type="text" v-model="name">
      </label>
      <input type="button" value="添加" @click="add">
    </div>
    <ul>
<!--      在实现列表过度时候，如果需要过渡的元素，是通过v-for循环渲染的不能使用transition
包裹，需要使用transitionGroup-->
<!--      如果要为v-for循环创建的元素设置动画，必须为每一个元素设置 :key 属性-->
     <transition-group>
       <li v-for="item in list" :key="item.id">
         {{item.id}}---{{item.name}}
       </li>
     </transition-group>
    </ul>
  </div>

</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                id: '',
                name: '',
                list: [
                    {id: 1, name: '赵高'},
                    {id: 2, name: '李四'},
                    {id: 3, name: '张三'},
                ]

            }
        },
        methods: {
            add() {
                this.list.push({id: this.id, name: this.name})
                this.id=this.name = ''
            }
        }

    }
</script>
<style>
  li {
    border: 1px dashed #42b983;
    margin: 5px;
    line-height: 35px;
    padding-left: 12px;
    font-size: 12px;
  }
  li:hover{
    background-color: aqua;
    transition: all 0.8s ease;
  }
  .v-enter,
  .v-leave-to{
    opacity: 0;
    transform: translateY(80px);
  }
  .v-enter-active,
  .v-leave-active{
    transition: all 1s ease;
  }
</style>

删除

<template>
  <div>
    <div>
      <label>
        Id:
        <input type="text" v-model="id">
      </label>
      <label>
        Name:
        <input type="text" v-model="name">
      </label>
      <input type="button" value="添加" @click="add">
    </div>
    <ul>
      <!--      在实现列表过度时候，如果需要过渡的元素，是通过v-for循环渲染的不能使用transition
      包裹，需要使用transitionGroup-->
      <!--      如果要为v-for循环创建的元素设置动画，必须为每一个元素设置 :key 属性-->
      <transition-group>
        <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
          {{item.id}}---{{item.name}}
        </li>
      </transition-group>
    </ul>
  </div>

</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                id: '',
                name: '',
                list: [
                    {id: 1, name: '赵高'},
                    {id: 2, name: '李四'},
                    {id: 3, name: '张三'},
                    {id: 4, name: '张dfg '},
                ]

            }
        },
        methods: {
            add() {
                this.list.push({id: this.id, name: this.name})
                this.id = this.name = ''
            },
            del(i) {
                this.list.splice(i, 1)
            }
        }

    }
</script>
<style>
  li {
    border: 1px dashed #42b983;
    margin: 5px;
    line-height: 35px;
    padding-left: 12px;
    font-size: 12px;
    width: 100%;
  }

  li:hover {
    background-color: aqua;
    transition: all 0.8s ease;
  }

  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateY(80px);
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 1s ease;
  }
  /*下面中的.v-move和.v-leave-active配合使用能够实现列表渐渐的飘上来 */
  .v-move{
    transition: all 1s ease;
  }
  .v-leave-active {
    position: absolute;

  }
</style>

动画-transition-group中appear和tag属性的作用

<ul>
    <!--      appear实现页面刚展示出来的入场效果-->
      <transition-group appear>
        <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
          {{item.id}}---{{item.name}}
        </li>
      </transition-group>
      </ul>

<!--    <ul>-->
      <!--      在实现列表过度时候，如果需要过渡的元素，是通过v-for循环渲染的不能使用transition
      包裹，需要使用transitionGroup-->
      <!--      如果要为v-for循环创建的元素设置动画，必须为每一个元素设置 :key 属性-->
<!--      appear实现入场效果-->
<!--    通过为transition-group设置tag属性，指定transition-group渲染为指定元素，如果不指定，tag属性默认为span-->
      <transition-group appear tag="ul">
        <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
          {{item.id}}---{{item.name}}
        </li>
      </transition-group>
<!--    </ul>-->