Vue基础16之过度与动画、TodoList-动画效果

最新推荐文章于 2024-07-02 09:50:36 发布
最新推荐文章于 2024-07-02 09:50:36 发布
阅读量841 收藏
点赞数
分类专栏： 前端 Vue基础 文章标签： vue.js javascript 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/129167591
版权
文章详细介绍了如何在Vue中实现过渡和动画效果，包括使用内置的transition组件和transition-group，以及结合第三方库animate.css创建复杂动画。通过示例代码展示了不同场景下的过渡动画，如单个元素的显示/隐藏、多个元素过渡和第三方动画库的集成。
摘要由CSDN通过智能技术生成

Vue基础16

过度与动画

动画效果

App.vue

<template>
  <div class="bg">
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition appear>  <!--      appear意味着刷新完毕后会执行一遍进入动画-->
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
    <transition name="hello">
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return{
      isShow:true
    }
  },
}
</script>

<style lang="less">
.bg{
  height: 937px;
  box-sizing: border-box;
}
h1{
  background-color: orange;
}
h1:last-child{
  background-color: skyblue;
}
//transition无名时候的进入动画
.v-enter-active{
  animation: trans 2s linear;
}
//transition无名时候的离开动画
.v-leave-active{
  animation: trans 2s linear reverse;  //reverse 倒着播放动画
}
@keyframes trans {
  from{
    transform: translateX(-100%)
  }to{
       transform: translateX(0);
     }
}

//hello的进入动画
.hello-enter-active{
  animation: trans 5s linear;
}
//hello的离开动画
.hello-leave-active{
  animation: trans 5s linear reverse;  //reverse 倒着播放动画
}
</style>

请添加图片描述

过度效果

App.vue

<template>
  <div class="bg">
<!--    <Animation></Animation>-->
    <TransitionEffect></TransitionEffect>
  </div>
</template>

<script>
import Animation from "@/components/Animation";
import TransitionEffect from "@/components/TransitionEffect";
export default {
  name: "App",
  components:{Animation,TransitionEffect}
}
</script>

<style lang="less">
.bg{
  height: 937px;
  box-sizing: border-box;
}
</style>

TransitionEffect.vue

<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition name="hello" appear>
      <h2 v-show="isShow">你好啊！</h2>
    </transition>
  </div>
</template>

<script>
    export default {
        name: "TransitionEffect",
        data(){
          return{
            isShow:false
          }
        }
    }
</script>

<style scoped>
h2{
  background-color: pink;
  /*transition: 2s linear;*/
}
/*详细的写法*/
/*!*进入的起点*!
.hello-enter{
  transform: translateX(-100%);
}
!*进入的终点*!
.hello-enter-to{
  transform: translateX(0);
}
!*离开的起点*!
.hello-leave{
  transform: translateX(0);
}
!*离开的终点*!
.hello-leave-to{
  transform: translateX(-100%);
}*/


/*合并写法*/
/*进入的起点，离开的终点*/
.hello-enter,.hello-leave-to{
  transform: translateX(-100%);
}
/*进入的终点，离开的起点*/
.hello-enter-to,.hello-leave{
  transform: translateX(0);
}
/*如果不在标签上写的话，就在这里写动画运动时长与速度*/
.hello-enter-active,.hello-leave-active{
  transition: 2s linear;
}

</style>

请添加图片描述

多个元素过度

App.vue

<template>
  <div class="bg">
<!--    <Animation></Animation>-->
<!--    <TransitionEffect></TransitionEffect>-->
    <MoreTransition></MoreTransition>
  </div>
</template>

<script>
import Animation from "@/components/Animation";
import TransitionEffect from "@/components/TransitionEffect";
import MoreTransition from "@/components/MoreTransition";
export default {
  name: "App",
  components:{MoreTransition, Animation,TransitionEffect}
}
</script>

<style lang="less">
.bg{
  height: 937px;
  box-sizing: border-box;
}
</style>

MoreTransition.vue

<template>
<div>
  <button @click="isShow=!isShow">显示/隐藏</button>
  <transition-group name="introduce">
    <h1 v-show="isShow" key="1" class="hello">你好啊！</h1>
    <h1 v-show="!isShow" key="2" class="name">张三</h1>
  </transition-group>
</div>
</template>

<script>
  export default {
    name: "MoreTransition",
    data(){
        return{
          isShow:true
        }
    }

  }
</script>

<style scoped>
.hello{
  background-color: orange;
}
.name{
  background-color: pink;
}
/* 进入的起点，离开的终点 */
.introduce-enter,.introduce-leave-to{
  transform: translateX(-100%);
}
/* 进入的终点，离开的起点 */
.introduce-enter-to,introduce-leave{
  transform: translateX(0);
}
.introduce-enter-active,.introduce-leave-active{
  transition: 2s linear;
}
</style>

请添加图片描述

集成第三方动画

安装

  1. 在 npm官网 中找animate.css动画库
    在这里插入图片描述
  2. 安装animate.css
    执行命令

npm install animate.css

在这里插入图片描述

  1. 引入第三方库

import ‘animate.css’

在这里插入图片描述

  1. 第三方库官网

应用

App.vue
<template>
  <div class="bg">
<!--    <Animation></Animation>-->
<!--    <TransitionEffect></TransitionEffect>-->
<!--    <MoreTransition></MoreTransition>-->
    <ThirdAnimation></ThirdAnimation>
  </div>
</template>

<script>
import Animation from "@/components/Animation";
import TransitionEffect from "@/components/TransitionEffect";
import MoreTransition from "@/components/MoreTransition";
import ThirdAnimation from "@/components/ThirdAnimation";
export default {
  name: "App",
  components:{ThirdAnimation, MoreTransition, Animation,TransitionEffect}
}
</script>

<style lang="less">
.bg{
  height: 937px;
  box-sizing: border-box;
}
</style>
ThirdAnimation.vue
<template>
  <div>
    <button @click="isShow=!isShow">显示/隐藏</button>
    <transition
        name="animate__animated animate__bounce"
        enter-active-class="animate__heartBeat"
        leave-active-class="animate__backOutDown"
        appear>
      <h1 v-show="isShow">你好啊~</h1>
    </transition>
  </div>
</template>

<script>
import 'animate.css'
export default {
    name: "ThirdAnimation",
  data(){
      return{
        isShow:true
      }
  }
}
</script>

<style scoped>
h1{
  background-color: skyblue;
  text-align: center;
}
</style>

请添加图片描述

总结：Vue封装的过度与动画

  1. 作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。

  2. 图示：
    在这里插入图片描述

  3. 写法：
    （1）准备好样式：

    • 元素进入的样式：
      1.v-enter：进入的起点
      2.v-enter-active：进入过程中
      3.v-enter-to：进入的终点
    • 元素离开的样式：
      1.v-leave：离开的起点
      2.v-leave-active：离开过程中
      3.v-leave-to：离开的终点

（2）使用<transition>包裹要过度的元素，并配置name属性：

<transition name="hello">
  <h1 v-show="isShow">你好啊！</h1>
</transition>

（3）备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值

TodoList-过度与动画

在清单被添加时与删除时候加上动画

使用@keyframs写动画

MyItem.vue

<template>
    <transition name="todo" appear>
      <li @dblclick="editItem(todo)">
        <!--      <input type="checkbox" name="matter" id="" v-model="todo.done">-->
        <input type="checkbox" name="matter" id="" @change="checkDone(todo.id)" :checked="todo.done">
        &nbsp;
        <input type="text" ref="inputTitle"  :value="todo.title" class="editIn" v-show="todo.isEdit" @blur="ensureEdit($event,todo)" @keyup.enter="ensureEdit($event,todo)">
        <span class="todoTitle" v-show="!todo.isEdit">{{todo.title}}</span>
        <button class="delete" @click="deleteItem(todo.id)">删除</button>
        <button class="edit" @click="editItem(todo)">编辑</button>
      </li>
    </transition>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
  name: "MyItem",
  props:['todo'],
  methods:{
    deleteItem(id){
      //消息的发布
      if(confirm('确认删除嘛？'))  pubsub.publish("deleteTodo",id)
    },
    checkDone(id){
      //触发公共组件的某个事件
      this.$bus.$emit("checkTodo",id)
    },
    //编辑
    editItem(todo){
      if(!todo.hasOwnProperty("isEdit")){
        this.$set(todo,'isEdit',true)
      }else{
        todo.isEdit=true
      }
      //由于代码是按顺序执行的，所以不会在执行完上面的代码之后就重新渲染页面
      //继续向下执行，但此时的input框还是隐藏状态，隐藏状态是没办法获取焦点的，因此使用定时器来延迟获取焦点
      // setTimeout(()=>{
      //   this.$refs.inputTitle.focus()
      // })

      this.$nextTick(function(){
        this.$refs.inputTitle.focus()
      })
    },
    //失去焦点确认编辑成功
    ensureEdit(e,todo){
      todo.isEdit=false
      if(!e.target.value.trim())  return alert("输入的内容不得为空")
      this.$bus.$emit("editTodo",todo.id,e.target.value)
    }
  }
}
</script>

<style scoped lang="less">
li{
  //height: 35%;
  //width: 96%;
  display: block;
  //background-color: pink;
  margin: auto;
  padding: 12px;
  border-top: 1px solid rgba(87, 87, 87, 0.3);
  //border-left: 1px solid rgba(87, 87, 87, 0.3);
  //border-right: 1px solid rgba(87, 87, 87, 0.3);
  box-sizing: border-box;
  //border-collapse: collapse;
  .editIn{
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .editIn:focus{
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    outline: none;
  }
  .delete{
    background-color: #d9534f;
    float: right;
    padding: 3px 10px;
    color: white;
    border: 1px solid #d43f3a;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
      background-color: #c9302c;
      border: 1px solid #ac2925;
    }
  }
  .edit{
    //background-color: #337ab7;
    float: right;
    padding: 3px 10px;
    margin-right: 5px;
    color: white;
    border: 1px solid #4cae4c;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
      border: 1px solid #398439;
      //background-color: #286090;
      background-color: #449d44;
      border-color: #398439;
    }
    background-color: #5cb85c;
    //border-color: #4cae4c;
  }
  &:hover{
    background-color: rgba(0,0,0,0.1);
  }
}
/*添加时候位移变化 */
/*//进入的起点，离开的终点
.todo-enter,.todo-leave-to{
  transform: translateX(100%);
}
//进入的终点，离开的起点
.todo-enter-to,.todo-leave{
  transform: translateX(0);
}
.todo-enter-active,.todo-leave-active{
  transition: 1s linear;
}*/

//添加与删除时候透明度变化
.todo-enter-active{
  animation: trans 1s linear;
}
.todo-leave-active{
  animation: trans 1s linear reverse;
}
@keyframes trans {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
</style>

请添加图片描述

使用.v-enter,.v-leave写动画

<template>
    <transition name="todo" appear>
      <li @dblclick="editItem(todo)">
        <!--      <input type="checkbox" name="matter" id="" v-model="todo.done">-->
        <input type="checkbox" name="matter" id="" @change="checkDone(todo.id)" :checked="todo.done">
        &nbsp;
        <input type="text" ref="inputTitle"  :value="todo.title" class="editIn" v-show="todo.isEdit" @blur="ensureEdit($event,todo)" @keyup.enter="ensureEdit($event,todo)">
        <span class="todoTitle" v-show="!todo.isEdit">{{todo.title}}</span>
        <button class="delete" @click="deleteItem(todo.id)">删除</button>
        <button class="edit" @click="editItem(todo)">编辑</button>
      </li>
    </transition>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
  name: "MyItem",
  props:['todo'],
  methods:{
    deleteItem(id){
      //消息的发布
      if(confirm('确认删除嘛？'))  pubsub.publish("deleteTodo",id)
    },
    checkDone(id){
      //触发公共组件的某个事件
      this.$bus.$emit("checkTodo",id)
    },
    //编辑
    editItem(todo){
      if(!todo.hasOwnProperty("isEdit")){
        this.$set(todo,'isEdit',true)
      }else{
        todo.isEdit=true
      }
      //由于代码是按顺序执行的，所以不会在执行完上面的代码之后就重新渲染页面
      //继续向下执行，但此时的input框还是隐藏状态，隐藏状态是没办法获取焦点的，因此使用定时器来延迟获取焦点
      // setTimeout(()=>{
      //   this.$refs.inputTitle.focus()
      // })

      this.$nextTick(function(){
        this.$refs.inputTitle.focus()
      })
    },
    //失去焦点确认编辑成功
    ensureEdit(e,todo){
      todo.isEdit=false
      if(!e.target.value.trim())  return alert("输入的内容不得为空")
      this.$bus.$emit("editTodo",todo.id,e.target.value)
    }
  }
}
</script>

<style scoped lang="less">
li{
  //height: 35%;
  //width: 96%;
  display: block;
  //background-color: pink;
  margin: auto;
  padding: 12px;
  border-top: 1px solid rgba(87, 87, 87, 0.3);
  //border-left: 1px solid rgba(87, 87, 87, 0.3);
  //border-right: 1px solid rgba(87, 87, 87, 0.3);
  box-sizing: border-box;
  //border-collapse: collapse;
  .editIn{
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .editIn:focus{
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    outline: none;
  }
  .delete{
    background-color: #d9534f;
    float: right;
    padding: 3px 10px;
    color: white;
    border: 1px solid #d43f3a;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
      background-color: #c9302c;
      border: 1px solid #ac2925;
    }
  }
  .edit{
    //background-color: #337ab7;
    float: right;
    padding: 3px 10px;
    margin-right: 5px;
    color: white;
    border: 1px solid #4cae4c;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
      border: 1px solid #398439;
      //background-color: #286090;
      background-color: #449d44;
      border-color: #398439;
    }
    background-color: #5cb85c;
    //border-color: #4cae4c;
  }
  &:hover{
    background-color: rgba(0,0,0,0.1);
  }
}
//添加时候位移变化
//进入的起点，离开的终点
.todo-enter,.todo-leave-to{
  transform: translateX(100%);
}
//进入的终点，离开的起点
.todo-enter-to,.todo-leave{
  transform: translateX(0);
}
.todo-enter-active,.todo-leave-active{
  transition: 1s linear;
}

/*//添加与删除时候透明度变化
.todo-enter-active{
  animation: trans 1s linear;
}
.todo-leave-active{
  animation: trans 1s linear reverse;
}
@keyframes trans {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}*/
</style>

请添加图片描述

不在MyItem中加，在MyList中加动画

MyItem.vue

<template>
<!--  <transition>-->
    <li @dblclick="editItem(todo)">
      <!--      <input type="checkbox" name="matter" id="" v-model="todo.done">-->
      <input type="checkbox" name="matter" id="" @change="checkDone(todo.id)" :checked="todo.done">
      &nbsp;
      <input type="text" ref="inputTitle"  :value="todo.title" class="editIn" v-show="todo.isEdit" @blur="ensureEdit($event,todo)" @keyup.enter="ensureEdit($event,todo)">
      <span class="todoTitle" v-show="!todo.isEdit">{{todo.title}}</span>
      <button class="delete" @click="deleteItem(todo.id)">删除</button>
      <button class="edit" @click="editItem(todo)">编辑</button>
    </li>
<!--  </transition>-->
</template>

<script>
import pubsub from 'pubsub-js'
export default {
  name: "MyItem",
  props:['todo'],
  methods:{
    deleteItem(id){
      //消息的发布
      if(confirm('确认删除嘛？'))  pubsub.publish("deleteTodo",id)
    },
    checkDone(id){
      //触发公共组件的某个事件
      this.$bus.$emit("checkTodo",id)
    },
    //编辑
    editItem(todo){
      if(!todo.hasOwnProperty("isEdit")){
        this.$set(todo,'isEdit',true)
      }else{
        todo.isEdit=true
      }
      //由于代码是按顺序执行的，所以不会在执行完上面的代码之后就重新渲染页面
      //继续向下执行，但此时的input框还是隐藏状态，隐藏状态是没办法获取焦点的，因此使用定时器来延迟获取焦点
      // setTimeout(()=>{
      //   this.$refs.inputTitle.focus()
      // })

      this.$nextTick(function(){
        this.$refs.inputTitle.focus()
      })
    },
    //失去焦点确认编辑成功
    ensureEdit(e,todo){
      todo.isEdit=false
      if(!e.target.value.trim())  return alert("输入的内容不得为空")
      this.$bus.$emit("editTodo",todo.id,e.target.value)
    }
  }
}
</script>

<style scoped lang="less">
li{
  //height: 35%;
  //width: 96%;
  display: block;
  //background-color: pink;
  margin: auto;
  padding: 12px;
  border-top: 1px solid rgba(87, 87, 87, 0.3);
  //border-left: 1px solid rgba(87, 87, 87, 0.3);
  //border-right: 1px solid rgba(87, 87, 87, 0.3);
  box-sizing: border-box;
  //border-collapse: collapse;
  .editIn{
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .editIn:focus{
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    outline: none;
  }
  .delete{
    background-color: #d9534f;
    float: right;
    padding: 3px 10px;
    color: white;
    border: 1px solid #d43f3a;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
      background-color: #c9302c;
      border: 1px solid #ac2925;
    }
  }
  .edit{
    //background-color: #337ab7;
    float: right;
    padding: 3px 10px;
    margin-right: 5px;
    color: white;
    border: 1px solid #4cae4c;
    border-radius: 5px;
    cursor: pointer;
    &:hover{
      border: 1px solid #398439;
      //background-color: #286090;
      background-color: #449d44;
      border-color: #398439;
    }
    background-color: #5cb85c;
    //border-color: #4cae4c;
  }
  &:hover{
    background-color: rgba(0,0,0,0.1);
  }
}
/*
//添加时候位移变化
//进入的起点，离开的终点
.todo-enter,.todo-leave-to{
  transform: translateX(100%);
}
//进入的终点，离开的起点
.todo-enter-to,.todo-leave{
  transform: translateX(0);
}
.todo-enter-active,.todo-leave-active{
  transition: 1s linear;
}
*/

/*//添加与删除时候透明度变化
.todo-enter-active{
  animation: trans 1s linear;
}
.todo-leave-active{
  animation: trans 1s linear reverse;
}
@keyframes trans {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}*/
</style>

MyList.vue

<template>
  <div>
    <ul>
      <div class="con">
        <transition-group name="todo" appear>
          <MyItem v-for="todo in todos" :todo="todo" :key="todo.id"/>
        </transition-group>
      </div>
    </ul>
  </div>
</template>

<script>
import MyItem from "@/components/MyItem";
export default {
  name:'MyList',
  components:{MyItem},
  props:['todos']
}
</script>

<style scoped lang="less">
ul{
  .con{
    //width: 95%;
    //margin: auto;
    border-bottom: 1px solid rgba(87, 87, 87, 0.3);
    border-left: 1px solid rgba(87, 87, 87, 0.3);
    border-right: 1px solid rgba(87, 87, 87, 0.3);
    margin: 0px 8px;
    //background-color: pink;
  }
}
//添加与删除时候透明度变化
.todo-enter-active{
  animation: trans 1s linear;
}
.todo-leave-active{
  animation: trans 1s linear reverse;
}
@keyframes trans {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
</style>

请添加图片描述

VillanelleS
关注
专栏目录
Vue中TodoList案例_动画
m0_71088505的博客
07-26 232
主要是引入了import 'animate.css'样式库，然后再li标签外套了transition标签，引用了name里面的名称是animate.css拿过来的，绑定了enter-active-class和leave-active-classanimate库内自带的绑定样式。
Vue06 全局事件总线 TodoList-事件总线 消息订阅与发布 TodoList-pubsub TodoList-编辑$nextTick 动画效果 github案例
weixin_58562753的博客
03-13 1556
全局事件总线 TodoList-事件总线 消息订阅与发布 TodoList-pubsub TodoList-编辑$nextTick 动画效果 过度效果 配置代理_方式一二 github案例
利用vue实现简单的ToDoList
qq_40994735的博客
08-31 597
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ToDOlist</title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"
Vue—TodoList案例（动画、计算属性、组件、组件通信、浏览器本地存储、监视属性）
weixin_51351637的博客
09-14 214
全面详细TodoList案例
Vue-----带有动画效果的todo_list案例
m0_62907534的博客
04-14 434
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决.
Day26_TodoList案例的添加删除---动画效果
qq_59110215的博客
09-24 109
卷
Vue学习（十七）nextTick和过度与动画
qq_29107721的博客
06-19 228
过度与动画 写法 样式准备：使用包裹要过度的元素，并配置name属性 App组件 Test组件 Test2 Test3 TodoList 添加动画 在MyItem中添加 在MyList中添加
[091-095]_Vue的过渡与动画
述安的博客
11-29 100
文章目录过渡与动画（完整代码）main.jsApp.vue组件Test.vueTest2.vueTest3.vue总结Vue封装的过渡与动画TodoList案例新增动画效果（完整代码）main.jsApp.vue组件MyHeader.vueMyList.vueMyItem.vueMyFooter.vue 过渡与动画（完整代码） main.js //引入Vue import Vue from 'vue' //引入App import App from './App.vue' //关闭Vue的生产提示 Vue.
Vue | 使用Vue脚手架 【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
不爱吃菜的菜菜的博客
07-17 428
子组件===>父组件使用场景A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。绑定自定义事件或
小白零基础学 VUE笔记
baidu_36820987的博客
12-29 1010
面试题：react、vue中的key有什么作用？（key的内部原理）1. 虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
Vue实现手机扫描二维码预览页面效果
10-15
主要为大家详细介绍了Vue实现手机扫描二维码预览页面效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue扫描指纹动画
最新发布
qq_73882890的博客
07-02 260
【代码】vue扫描指纹动画。
Vue2（十）：全局事件总线、消息订阅与发布、TodoList的编辑功能、$nextTick、动画
Kiwi23333的博客
12-27 616
因为接收数据的组件A中定义的回调函数和自定义事件是绑定的，而这个用来接收数据的组件实例A都销毁了，回调函数也没了，那这个xxxx自定义事件也就没用了，你留着会污染全局环境（这块儿有点迷糊）这玩意儿用的不多，和全局事件总线写法差不多，但是全局事件总线更好，因为是在Vue身上操作，但是这个的话要引入第三方库，库有很多，比如pubsub-js。，那每次点击编辑按钮，都会添加一次isEdit属性，这样是不太好的，所以要加个判断，添加过了就改成true，没添加过就添加个true。，而且原来的span要隐藏。
浅谈React实现todolist
筱葭的博客
04-22 1174
todoList.html： todoList.jsx： var TodoList = React.createClass({ getInitialState: function() { return {lists: []} }, addList: function(list) { if (this.stat
vue动画
m0_67388537的博客
07-25 136
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css. 结合使用十分有用。
VUE / CSS 动画之- 雷达图 / radar loading
pinke的博客
05-12 384
那VUE 除了原生weex外其它的小程序也都是HTML,所以css通用。HTML动画常见的有 gif,svg,css,js。这里直接用css 做个vue 雷达动画。只做了两个长宽参数,你可以自己扩。原始效果如下,实际效果可调整.
【VUE】-前端探秘 VUE中的动画特效
老汉健身的博客
03-28 929
1.Vue中的动画实现原理 Vue实际上是通过动态地给<transition>标签包裹的内容添加class,然后结合css对不同的class实现不同样式,最终实现动画效果. <!--淡入/淡出--> <style> .v-enter, .v-leave-to{ opacity: 0; ...
四、vue中的动画特效
sinat_40697723的博客
05-17 5281
一.vue中的css动画原理：通过在某一时刻自动的往一些标签上增加一些样式来实现的。 看下面代码： &lt;body&gt; &lt;div id="root"&gt; &lt;div v-if='show'&gt;hello world&lt;/div&gt; &lt;button @click='handClick'&gt;切换&lt;/button&gt;
Jetpack-Compose绘制雷达扫描动画
LiePy的博客
11-29 404
Jetpack-Compose绘制雷达扫描动画
Vue实现复杂动画：create-keyframe-animation与动画钩子结合
"Vue中使用create-keyframe-animation与动画钩子完成复杂动画" 在Vue.js中，创建复杂的动画效果可以通过结合使用`create-keyframe-animation`库和Vue的内置动画钩子来实现。本文将深入探讨如何利用这些工具来构建一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值