前端学习--Vue.js Day3_transiti appear属性-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38009285/article/details/86636622

本文深入探讨了Vue.js中的动画实现方法，包括使用过渡类名、第三方类库和钩子函数，以及如何利用transition和transition-group元素。同时，讲解了组件的概念、创建方式和使用技巧，如组件切换和私有组件定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、品牌列表-从数据库获取列表
在这里插入图片描述
发送Ajax（get、post、jsonp）请求时要尽量在挂载之前，最好在created中执行发送函数（最早也只能是在created，这时才能获取data和methods）

2、品牌列表–完成添加功能

3、品牌列表–完成删除功能

4、品牌列表–全局配置数据接口的根域名
在这里插入图片描述
5、品牌列表–全局配置emulateJSON选项

6、动画-使用过渡类名实现动画
7、动画-自定义“v-”前缀：区分不同组之间的动画

<template>
  <div>
    <!--动画-使用过渡类名实现动画动画-使用过渡类名实现动画-->
    <!--需求：点击按钮，让h3显示，再点击按钮，让h3隐藏-->
    <button @click="flag = !flag">点击</button>
    <br>
    <!--1. 使用transition元素，把需要动画控制的元素包裹起来
    transition元素是bue官方提供的
    -->
    <transition>
      <h3 v-if="flag">这是一个h3</h3>
    </transition>
    <hr>
    <button @click="flag2 = !flag2">点击</button>
    <transition name="my">
      <h6 v-if="flag2">这是一个h6</h6>
    </transition>
  </div>
</template>

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

    }
  }
</script>

<style scoped>
  /*2. 自定义两组样式，来控制translation内部的元素实现动画
  */
  /*v-enter [这是一个时间点] 是进入之前，元素的起始状态，此时还没有开始进入*/
  /*v--leave-to [这是一个时间点] 是离开之后，元素离开的终止状态，此时元素动画已经结束*/
  .v-enter, .v-leave-to{
    opacity: 0;
    transform: translateX(180px);
  }

  /*.v-enter-active(入场动画的时间段), .v-leave-active(离场动画的时间段)*/
  .v-enter-active, .v-leave-active{
    transition:all 0.4s ease;
  }
  
  .my-enter, .my-leave-to{
    opacity: 0;
    transform: translateY(180px);
  }
  .my-enter-active, .my-leave-active{
    transition:all 0.4s ease;
  }
</style>

8、动画-使用第三方animate.css类库实现动画
在这里插入图片描述
9、动画-钩子函数实现半场动画介绍
钩子函数：动画的生命周期函数

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

<template>
  <!--钩子函数实现小球半场动画-->
  <div>
    <button @click="flag = !flag">加入购物车</button>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
    >
      <div class="ball" v-show="flag"></div>
    </transition>
  </div>

</template>
<script>

  export default {
    data(){
      return {
        flag:false
      }
    },
    methods:{
      //注意：动画钩子函数的第一个参数：el，表示要执行动画的那个DOM元素，是个原生JS DOM对象
      //可以看作，通过document.getElementById('')获取的原生JS DOM对象
      beforeEnter(el){
      //  此时动画还没有开始，可以在这里设置元素开始动画的初始样式
      //  设置小球开始动画之前的，起始位置
        el.style.transform = "translate(0, 0)"
      },
      enter(el, done){
        //这句话没有实际的作用，但是没写则无法实现动画效果（没有过渡）
        //通过el.offsetWidth会强制动画刷新
        el.offsetWidth
      //  这里可以设置小球完成动画的结束状态
      //  translate(x, y)
        el.style.transform = "translate(150px, 450px)"
        el.style.transition = 'all 1s ease'

        //done == afterEnter函数，也就是说：done是afterEnter的引用
        //当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。
        // 否则，它们将被同步调用，过渡会立即完成。
        done()
      },
      afterEnter(el){
         this.flag = false
      }
    }
  }
</script>

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

11、使用transition-group元素实现列表动画
12、实现列表删除和删除时候的动画效果

<template>
  <div>

    <div>
      <label>
        ID:
        <input type="text" v-model="id">
      </label>
      <label>
        Name:
        <input type="text" v-model="name">
      </label>

      <button @click="add">点击</button>

    </div>

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

    </ul>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        id:'',
        name:'',
        list:[
          {id: 1, name: '赵高'},
          {id: 2, name: '秦桧'},
          {id: 3, name: '严嵩'},
          {id: 4, name: '魏忠贤'}
        ]
      }
    },
    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 #999;
    margin: 5px;
    line-height: 35px;
    padding-left: 5px;
    font-size: 12px;
    text-align: left;
  }

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

  .v-enter-active, .v-leave-active{
    transition: all 0.6s ease;
  }
  li:hover{
    background-color: pink;
    transition: all 0.6s ease;
    width: 100%;
  }

  /*固定写法（一般都这样写.v-move和.v-leave-active）
  实现列表离开效果*/
  .v-move{
    transition: all 0.6s ease;
  }
  .v-leave-active{
    position: absolute;
  }
</style>

13、transition-group中的appear和tag属性的作用
在这里插入图片描述
14、组件：
（1）什么是组件
（2）组件化和模块化的不同：

（3）创建组件的方式：
方法1：Vue.component（全局组件）与Vue.extend
定义组件：Vue.extend会返回一个组件对象
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
在这里插入图片描述
或者

使用组件：注意组件名声明的时候可以驼峰命名，则使用时需要用”-小写“来代替大写
在这里插入图片描述

方法2：Vue.component（全局组件）与{}(对象)
在这里插入图片描述
注意点：

方法3：
定义组件

使用组件：
在这里插入图片描述

（4）使用components定义私有组件
定义html内容
在这里插入图片描述
在id = vm2中定义组件

使用组件（这里是局部组件）

（5）组件中的data：此时的data不能是对象而是定义成为一个函数

（6）为什么组件的data必须是一个function

好处在于：
每次实例组件都会创建一个count变量，每个实例之间没有关联

（7）组件切换–使用v-if和v-else结合flag进行切换
缺点：flag只有true和false两种结果，因此只能切换两个组件

<template>
  <div>
    <a href="" @click.prevent="flag = true">登录</a>
    <a href="" @click.prevent="flag = false">注册</a>

    <login v-if="flag"></login>
    <register v-else="flag"></register>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    name: 'case8',
    data(){
      return{
        flag:true
      }
    }
  }

  Vue.component('login',{
    template:'<h3>这是登录</h3>'
  })
  Vue.component('register',{
    template:'<h3>这是注册</h3>'
  })

</script>

<style scoped>

</style>

（8）组件切换–使用Vue提供的component元素实现组件切换

<template>
  <div>
    <a href="" @click.prevent="comName = 'login'">登录</a>
    <a href="" @click.prevent="comName = 'register'">注册</a>
    <component :is="comName"></component>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    data(){
      return{
        comName:'login'
      }
    }

  }
  Vue.component('login',{
    template: '<h3>这是登录</h3>'
  })
  Vue.component('register', {
    template: '<h3>这是注册</h3>'
  })
</script>

（9）组件切换–应用切换动画和mode方式

<template>
  <div>
    <a href="" @click.prevent="comName = 'login'">登录</a>
    <a href="" @click.prevent="comName = 'register'">注册</a>
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>

  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    data(){
      return{
        comName:'login'
      }
    }

  }
  Vue.component('login',{
    template: '<h3>这是登录</h3>'
  })
  Vue.component('register', {
    template: '<h3>这是注册</h3>'
  })
</script>

<style>
  .v-enter,
  .v-leave-to{
    opacity: 0;
    transform: translateX(150px);
  }

  .v-enter-active,
  .v-leave-active{
    transition: all 0.5s ease;
  }
</style>