Vue2 （动画效果）-day11

已于 2023-11-14 11:37:15 修改
阅读量387 收藏
点赞数 1
分类专栏： VUE2-VUE3 学习 文章标签： 1024程序员节
于 2023-10-25 11:22:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/javaxueba/article/details/134005388
版权

一、动画效果

 keyframes 实现

1- Vue 中动画效果需要借助 transition 标签，该标签不会形成 HTML 结构

2- 搭配 .v-enter-active 和 .v-leave-active 可以实现元素进场和出场时的动画效果

3-

我们在还可以给 transition 添加 name 属性，指定动画的名称，此时进场动画和出场动画的类名就需要修改成 .name-enter-active 和 .name-leave-active

如例子 2-1、2-2

4-
如果想要初始化的时候就有动画效果，可以使用给 transition 添加 appear 属性（或者添加 :appear=true）
 

<template>
  <div>
    <!-- 1-1 无 name appear 出现展示效果-->
    <transition  appear="true">
      <h1 v-show="isShow">你好啊，Vue！ ！！</h1>
    </transition>

    <!--2-1  name为hello属性 -->
    <transition name="hello" appear="true">
      <h2 v-show="isShow">你好啊，Vue！ ！！</h2>
    </transition>
    <button @click="showFun">点击显示</button>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    showFun() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style scoped>
h1 {
  background-color: orange;
}

h2 {
  background-color: yellow;
}
/* 1-2 */
.v-enter-active {
  animation: demo1 0.5s linear;
}

.v-leave-active {
  animation: demo1 0.5s  linear reverse;
}
/* 2-2 name="hello" 写法 */
.hello-enter-active {
  animation: demo1 2s linear;
}

.hello-leave-active {
  animation: demo1 2s  linear reverse;
}

@keyframes demo1 {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

二、 过渡效果

对于入场动画，如下 3个

  • v-enter：进场的起点
  • .v-enter-active：进场特效激活全过程
  • .v-enter-to：进场的终点

对于出场，如下3个

  • .v-leave：出场的起点
  • .v-leave-active：出场特效激活全过程
  • .v-leave-to：出场的终点
<template>
  <div>
    <!-- 1-1 无 name appear 出现展示效果-->
    <transition  appear>
      <h1 v-show="isShow">你好啊，Vue！ ！！</h1>
    </transition>

    <!--2-1  name为hello属性 -->
    <transition name="hello" >
      <h2 v-show="isShow">你好啊，Vue！ ！！</h2>
    </transition>
    <button @click="showFun">点击显示</button>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    showFun() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style scoped>
h1 {
  background-color: orange;
}

h2 {
  background-color: yellow;
}
/* 1-2 */
.v-enter-active {
  animation: demo1 0.5s linear;
}

.v-leave-active {
  animation: demo1 0.5s  linear reverse;
}
/* 2-2 hello */
.hello-enter-active {
  animation: demo1 2s linear;
}

.hello-leave-active {
  animation: demo1 2s  linear reverse;
}

@keyframes demo1 {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

 三、多个元素的过渡

transition-group：一般用于列表渲染

我们前面讲到的 transition 只能给一个元素添加动画，如果想要给多个元素添加动画，那么我们就需要使用到 ，并且需要给每个元素添加唯一的 key 值

<template>
  <div>
    <!--1- transition-group 多个元素的过渡  -->
    <transition-group name="hello" appear>
      <h1 v-show="!isShow" key="1">你好啊，Vue！ ！！</h1>
      <h1 v-show="isShow" key="2">你好啊，Vue！ ！！</h1>
    </transition-group>
    <button @click="showFun">点击显示</button>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    showFun() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style scoped>
h1 {
  background-color: orange;
}
/* 1-  分开写 */
/* 进入的起点 */
.hello-enter {
  transform: translateX(-100%);
}
/* 进入的终点 */
.hello-leave-to {
  transform: translateX(0);
}

/* 离开的起点 */
.hello-leave {
  transform: translateX(0);
}
/* 离开的终点 */
.hello-leave-to {
  transform: translateX(-100%);
}

/* 2- 合并写法 */
/* 进入的起点 离开的终点*/
/* .hello-enter, .hello-leave-to{
  transform: translateX(-100%);
} */

/* 来的整个过程 和走的过程 */
.hello-enter-active,
.hello-leave-active {
  transition: 0.5s linear;
}

/* 离开的起点 离开的终点*/
/* .hello-leave, .hello-leave-to{
  transform: translateX(0);
} */
</style>

 四、动画插件

 我们进入到 npm 官网搜索 animate.css，进入到它的主页：Animate.css | A cross-browser library of CSS animations.

使用步骤：

1- 安装css库

npm install animate.css --save
 2- 引入

import 'animate.css'

3-引入class

<h1 class="animate__animated animate__bounce">An animated element</h1>

4- 

添加 enter-active-class 和 leave-active-class 样式到元素节点中，属性值从刚才的侧边栏中选择

<template>
  <div>
    <!--1-第三方插件 动画  npm install animate.css --save  或者 yarn add animate.css -->
    <transition-group 
    name="animate__animated animate__bounce" 
    enter-active-class="animate__swing"
    leave-active-class="animate__fadeOut"
    appear>
      <h1 v-show="!isShow" key="3">你好啊，Vue！ ！！</h1>
      <h1 v-show="isShow" key="4">你好啊，Vue！ ！！</h1>
    </transition-group>
    <button @click="showFun">点击显示</button>
  </div>
</template>

<script>
// 引入css
import animated from 'animate.css'


export default {
  name: "Test",
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    showFun() {
      this.isShow = !this.isShow;
    },
  },
};
</script>

<style scoped>
h1 {
  background-color: orange;
}
</style>

三、修改TODOList 的过渡效果

此处有2种方法 在每个item上面包裹，或者用   transition-group 包裹真个 list

 1-  在MyITem组件上面修改  transition

<template>
  <!-- 1- transition 添加动画效果  -->
  <transition name="todo" appear>
    <li>
      <label>
        <input
          type="checkbox"
          :checked="todo.done"
          @change="changeCheck(todo.id)"
        />

        <span v-show="!todo.isEdit">{{ todo.title }}</span>
        <!-- 输入框 -->
        <input
          v-show="todo.isEdit"
          type="text"
          :value="todo.title"
          @blur="handleBlur(todo, $event)"
          ref="inputTitle"
        />
      </label>
      <button class="btn btn-danger" @click="handleDelte(todo.id)">删除</button>
      <!--编辑按钮 -->
      <button
        v-show="!todo.isEdit"
        class="btn btn-edit"
        @click="handleEdit(todo)"
      >
        编辑
      </button>
    </li>
  </transition>
</template>

<script>
import pubsub from "pubsub-js";

export default {
  name: "MyItem",
  props: ["todo"],
  mounted() {
    console.log(this.todo);
  },
  methods: {
    changeCheck(id) {
      this.$bus.$emit("checkTodo", id);
    },
    handleDelte(id) {
      if (confirm("确认删除吗？")) {
        pubsub.publish("deleteTodo", id);
      }
    },
    // 3- 编辑操作（点击编辑显示输入框，判断是否有isEdit属性，无则 $set 绑定属性）
    handleEdit(todo) {
      if (!todo.hasOwnProperty("isEdit")) {
        //判断todo没有isEdit属性 追加属性
        this.$set(todo, "isEdit", true);
      } else {
        todo.isEdit = !todo.isEdit;
      }
      //dom 节点演示渲染
      // setTimeout(() => {
      //   this.$refs.inputTitle.focus();
      // }, timeout);
      this.$nextTick(function () {
        this.$refs.inputTitle.focus();
      });
    },
    //4- 失去焦点操作：保存数据
    handleBlur(todo, e) {
      todo.isEdit = !todo.isEdit;
      if (!e.target.value.trim()) {
        alert("输入不能为空！");
      }
      this.$bus.$emit("editTodo", todo.id, e.target.value);
    },
  },
};
</script>

<style scoped>
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

li:hover {
  background-color: gray;
}

li:hover button {
  display: block;
}
/* 2- 动画效果 */

/* 进入的起点 离开的终点*/
.todo-enter, .todo-leave-to{
  transform: translateX(-100%);
}

/* 来的整个过程 和走的过程 */
.todo-enter-active,
.todo-leave-active {
  transition: 0.5s linear;
}

/* 离开的起点 离开的终点*/
.todo-leave, .todo-leave-to{
  transform: translateX(0);
}
</style>

2- 在MyList上面用  transition-group

<template>
  <ul class="todo-main">
    <!--1-  transition-group 包裹list -->
    <transition-group name="todo" appear>
      <MyItem v-for="item in todos " :key="item.id" :todo="item" />
    </transition-group>
  </ul>
</template>

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

<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}

/* 2-动画效果 */

/* 进入的起点 离开的终点*/
.todo-enter, .todo-leave-to{
  transform: translateX(-100%);
}

/* 来的整个过程 和走的过程 */
.todo-enter-active,
.todo-leave-active {
  transition: 0.5s linear;
}

/* 离开的起点 离开的终点*/
.todo-leave, .todo-leave-to{
  transform: translateX(0);
}
</style>

syfjava
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的过渡与动画理解
pscool的博客
03-31 1163
这个时候就可以当作这个dom的属性的初始值，下一帧把它移除掉了，也就没了v-enter这个类名了，那么属性又会变成默认值(如果没有特别设置的话)，并且v-enter-active这个类名也是在元素插入之前就添加进去了（也就设置了transition了），v-enter-to也是在v-enter移除时的那一帧加上去的，那么就满足CSS3产生过渡动画的条件了（1.指定了过渡属性，2.过渡属性发生了可计量的变化）。过渡动画完成之后，v-enter-active和v-enter-to这两个类名被删除。
【Vue 学习】Vue2 的动画与过渡
不谷的博客
03-16 1062
Vue2 的动画与过渡
用Vue2如何做过渡&动画效果+著名动画库
huihui_999的博客
03-07 1210
Vue2如何做过渡&动画效果+著名动画库
Vue 中的几种动画效果
徐师兄的博客
06-10 2987
在使用transition组件时，我们可以使用和属性来自定义过渡类名。例如，我们可以这样写一个自定义过渡类名的例子：</</在上面的例子中，我们使用了和属性来自定义过渡类名。这些属性可以让我们更加灵活地控制过渡效果的细节。
vue多种实现动画效果分享【推荐学习】
CRMEB小程序商城的博客
09-09 1253
通常我们实现动画效果会用到CSS中的class类，这也是比较基本的方式实现动画。
vue.js科技感十足的数字时钟效果
10-14
一款使用vue.js制作的蓝色科技风格的数字时钟，带日期和星期天数的时钟特效。可用于酷炫科技类的网站数字时钟显示。
Vue之动画的实现
知识应该共享，创造才应收费
03-19 3395
当我们的UI界面显示出来后，需要和用户进行交互，即用户点击某个控件，比如是一个按钮，需要跳转到另一个界面的时候，如果直接跳转到另一个界面，功能是实现了，但是未免有些生硬，因为用户体验不是很好，这时就需要动画的润色了，添加一个好的转场动画能让用户使用起来拥有更好的体验，并且动画还可以让一些耗时的任务看起来不那么“耗时”，比如当用户下载一个文件时，假如没有动画，系统一直卡在下载当那个页面（其实系统没有卡住，只是在下载，用户以为卡住了），那么下载完文件后就会直接显示一个下载完成的界面给到用户，用户是很蒙的。但是使
vue2-day5.zip
08-10
10. **过渡效果**：Vue内置了基于CSS transitions和animations的过渡系统，同时支持第三方库如Animate.css进行更复杂的动画处理。 11. **单元测试**：Vue生态中的Jest或Mocha+Chai等工具可以帮助开发者进行组件的...
vue2-day8.zip
08-10
10. **过渡效果（Transition）**：Vue 2提供了内置的过渡系统，通过CSS或JavaScript库（如Animate.css或Velocity.js）实现组件进入、离开及更新时的动画效果。 11. **异步组件与动态导入**：Vue 2支持异步组件，...
Day8 智慧商城 Vue2
08-27
最后，为了提高用户体验，我们会学习Vue的过渡效果和动画，如使用`v-enter`、`v-leave`等指令配合CSS动画实现页面元素的入场和离开效果。 总的来说，"Day8 智慧商城 Vue2"课程将涵盖Vue2的基本概念和高级特性，通过...
vue-component_day04_03.zip
07-02
本教程将深入探讨在“vue-component_day04_03”项目中，如何拆分静态组件并实现它们在页面加载时的正确初始化显示。 首先，让我们了解组件的基本概念。在Vue中，组件可以看作是自包含的独立单元，具有自己的视图和...
Vue Day7 综合案例
08-11
9. **过渡效果**：Vue.js内置了过渡效果系统，可以为组件的插入、更新和移除添加动画。在页面切换或商品添加到购物车时，我们可能用到`v-enter`, `v-leave`等过渡类名。 10. **错误处理和生命周期钩子**：Vue组件有...
mpvue实现小程序签到金币掉落动画
热门推荐
marendu的博客
10-15 1万+
mpvue实现小程序签到金币掉落动画 因为小程序，不能用css写动画，所以这里使用小程序自带的api来实现， 用小程序来写动画的恶心点在于，没有帧，只能用setimeout 来作为帧来使用， 下面是实现代码， 下面是简单用div代替了图片，需要什么图片，可以自行替换相应的div即可 需要变成原生小程序，则需要修改一下代码的写法 效果图： 创建金币动画组件 clockAnimation.vu...
Vue2 - 使用第三方动画样式，实现过度动画
weixin_41606115的博客
02-15 276
enter-active-class设置入场的效果，使用leave-active-class设置离场的效果。备注：若有多个元素需要过度，则需要使用：，且每个元素都要指定key值。使用enter-active-class和leave-active-class应用css动画。v-enter-active：进入过程中。v-leave-active：离开过程中。v-enter-to：进入的终点。v-leave-to：离开的终点。v-enter：进入的起点。
Vue 中的动画特效(二)
SOALIN的博客
12-11 360
Vue中多个元素或组件的过渡 元素过渡：元素设置时注意要加上 key 来告诉 Vue 不要复用 DOM ，否则不会出现动画，我们为 transition 设置 mode 即可实现过渡效果 .v-enter, .v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: opacity 1...
vue2 笔记8动画
路过君的博客
01-29 690
样例解析 <template> <div class="hello"> <button @click="show1 = !show1">show</button> <!-- 使用transition标签，会在动画的对应阶段给包裹的元素添加、删除相应的样式 --> <!-- appear 使得元素在创建时就使用动画显示 --> <transition appear> <h1
vue 2 路由跳转过渡动画失效问题
LiuaxmIn的博客
11-03 719
当我点击路由跳转的时候 会慢慢的消失(这个时候效果会渐入) 但是跳转后会瞬间显示出页面(没有做到渐出)很影响体验,我看教程的时候 html代码为我上面那样写的 但是直接。当我的html代码为这个样的时候,动画能展示出来 但是渐入渐出 只做渐入 而。
Vue2动画效果
sinat_29304113的博客
12-10 634
总结： 作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。 图示： 写法： (1)准备好样式： 元素进入样式：v-enter：进入的起点 v-enter-active：进入的过程中 v-enter-to：进入的终点 单个元素过渡 <template> <div> <button @click="show = !show">这是一个按钮</button> <!-- 过渡 :appear="true" 简写成 a
简约清新PPT模板，适用于工作总结，工作计划
最新发布
07-15
【作品名称】：简约清新PPT模板，适用于工作总结，工作计划 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
vue实现 折叠动画效果
07-28
要在Vue中实现折叠动画效果，您可以使用Vue的过渡效果和动态绑定class来实现。 首先，您可以使用Vue的`transition`组件来创建过渡效果。在组件中，您可以使用`v-if`或者`v-show`来控制元素的显示与隐藏，从而实现折叠与展开的效果。 下面是一个简单的示例： ```html <template> <div> <button @click="toggleCollapse">折叠/展开</button> <transition name="collapse"> <div v-if="isCollapsed"> <!-- 折叠内容 --> </div> </transition> </div> </template> <script> export default { data() { return { isCollapsed: false // 默认展开状态 }; }, methods: { toggleCollapse() { this.isCollapsed = !this.isCollapsed; } } }; </script> <style> .collapse-enter-active, .collapse-leave-active { transition: height 0.5s; // 过渡效果，可以根据需要自定义 } .collapse-enter, .collapse-leave-to { height: 0; // 初始高度为0，实现折叠效果 } </style> ``` 在上面的代码中，我们使用了Vue的`transition`组件来创建过渡效果，并且使用了`name`属性来指定过渡效果的名称。在样式中，我们定义了`.collapse-enter-active`和`.collapse-leave-active`两个类来定义过渡效果的动画属性，以及`.collapse-enter`和`.collapse-leave-to`两个类来定义元素的初始高度和离开时的高度。 当点击按钮时，`toggleCollapse`方法会切换`isCollapsed`的值，从而控制折叠与展开的状态。 您可以根据实际需求自定义过渡效果的样式和动画属性。希望这个示例能对您有所帮助！如有任何疑问，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值