使用Vue实现CSS过渡和动画

01-初识动画和过渡

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用vue实现css过渡和动画</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <div id="root"></div>
    <script>
      const app = Vue.createApp({
        template: `<div>hello world</div>`,
      });
      const vm = app.mount('#root')
    </script>
  </body>
</html>

过渡和动画的区别：
在这里插入图片描述
在这里插入图片描述

动画：

<style>
  @keyframes move {
    0% {
      transform: translateX(100px);
    }
    50% {
      transform: translateX(50px);
    }
    100% {
      transform: translateX(0);
    }
  }
  .animation {
    animation: move 2s;
  }
</style>

const app = Vue.createApp({
  template: `<div class="animation">hello world</div>`,
});
const vm = app.mount('#root')

效果：在这里插入图片描述
通过点击触发：

<script>
  const app = Vue.createApp({
    data() {
      return {
        animate: {
          animation: false
        }
      }
    },
    methods: {
      handleClick() {
        this.animate.animation = !this.animate.animation
      }
    },
    template: `
    <div :class="animate">hello world</div>
    <button @click="handleClick">按钮</button>
    `,
  });
  const vm = app.mount('#root')
</script>

在这里插入图片描述

过渡

<style>
.pink {
  background-color: pink;
}
.green {
  background-color: green;
}
.transition {
  transition: 2s ease;
}
</style>

const app = Vue.createApp({
  data() {
    return {
      animate: {
        transition: true,
        green: true,
        pink: false
      }
    }
  },
  methods: {
    handleClick() {
      this.animate.green = !this.animate.green
      this.animate.pink = !this.animate.pink
    }
  },
  template: `
  <div :class="animate">hello world</div>
  <button @click="handleClick">按钮</button>
  `,
});
const vm = app.mount('#root')

效果：
在这里插入图片描述

02-单元素/组件的入场和出场动画

过渡

基本使用：
入场过渡：

<style>
  /* 进入，开始 */
  .v-enter-from {
    opacity: 0;
  }
  /* 开始，结束规定动画的效果，这个必须要有，否则不生效 */
  .v-enter-active {
    transition: opacity 2s ease;
  }
  /* 出去，结束 */
  .v-enter-to {
    opacity: 1;
  }
</style>

const app = Vue.createApp({
  data() {
    return {
      show: false
    }
  },
  methods: {
    handleClick() {
      this.show = !this.show
    }
  },
  template: `
  <transition>
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">按钮</button>
  `,
});
const vm = app.mount('#root')

入场过渡效果：
在这里插入图片描述
出场过渡：

<style>
/* 出场的开始 */
.v-leave-from {
  opacity: 1;
}
.v-leave-active {
  transition: opacity 2s ease;
}
/* 出场的结束 */
.v-leave-to {
  opacity: 0;
}
</style>

出场过渡效果：
在这里插入图片描述

动画

<style>
@keyframes move {
  0% {
    transform: translateX(-100px);
  }
  50% {
    transform: translateX(-50px);
  }
  75% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
// 只需要 v-enter-active v-leave-active 即可
.v-enter-active {
  animation: move 2s ease-in;
}
.v-leave-active {
  animation: move 2s ease-in;
}
</style>

在这里插入图片描述
可以使用别名：

<style>
.yunmu-enter-active,
.yunmu-leave-active {
  animation: move 2s ease-in;
}
</style>

template: `
<transition name="yunmu">
  <div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`

也可以使用enter-active-class leave-active-class起别名

<style>
.hello,
.bye {
  animation: move 2s ease-in;
}
</style>

template: `
<transition name="yunmu"
	enter-active-class="hello"
	leave-active-class="bye"
>
  <div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>

起别名的好处，引入第三方组件库，直接添加name属性就可以完成对应的动画，比如第三方的animate.css
引入第三方动画库：

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>

js中直接使用animate__animated animate__bounce

template: `
<transition name="yunmu"
  enter-active-class="animate__animated animate__bounce"
  leave-active-class="animate__animated animate__bounce"
>
  <div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`

在这里插入图片描述
下面再来看这种场景：

<style>
@keyframes move {
  0% {
    transform: translateX(100px);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}
.v-enter-from {
  color: red;
}

.v-enter-active,
.v-leave-active {
  animation: move 10s ease-in;
  transition: all 3s ease;
}
.v-leave-active {
  color: red;
}
</style>

template: `
<transition>
  <div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`

动画10s，过渡3s;
在这里插入图片描述
可以看到，由于动画的时间比较长，所以过渡完了之后，动画依旧还在进行，如果我们想要达到两者相同的时间的效果的话，就需要制定一个标准：比如以时间短的为结束。可以使用下面的方法：

template: `
<transition type="transition">
  <div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`

给transition增加一个type，表示时间以哪个为准。
在这里插入图片描述
也可以使用duration属性，表示过渡和动画的时间

也可以使用js进行控制
// 动画进入之前
handleBeforeEnter(el) {
  el.style.color = 'red'
},
// 执行过程中
handleEnterActive(el, done) {
  const timer = setInterval(() => {
    const color = el.style.color;
    if(color === 'red') {
      el.style.color = 'green'
    } else {
      el.style.color = 'red'
    }
  }, 1000);
  setTimeout(() => {
    clearInterval(timer)
    done()
  }, 4000);
},
// 动画结束之后的钩子 只有 handleEnterActive 中的done执行完之后，该钩子才会执行
handleAfterEnter() {
  alert(22222)
}



template: `
<transition 
  :css="false"
  @before-enter="handleBeforeEnter"
  @enter="handleEnterActive"
  @after-enter="handleAfterEnter"
>
  <div v-if="show">hello world</div>
</transition>
<button @click="handleClick">按钮</button>
`,

在这里插入图片描述
另外离开的时候，也有对应的钩子before-leave leave after-leave

03-组件和元素切换动画的实现

<style>
.v-enter-from {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}
.v-enter-to,
.v-leave-from{
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
</style>

template: `
<transition 
>
  <div v-if="show">hello world</div>
  <div v-else>Bye world</div>
</transition>
<button @click="handleClick">按钮</button>
`,

在这里插入图片描述
有个问题：两个标签都是慢慢消失，慢慢出来，不是我们想要的效果
在transition标签上面增加mode="out-in"属性，表示先出场，再进场。
在这里插入图片描述
对比一下in-out
在这里插入图片描述
这样动画就不是一个同步的了。上面的if else标签也可以改成组件。
另外列表组件可以使用transition-group标签进行动画渲染，和transition标签使用差不多。
vue.js的过渡和动画 (更新完成)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/511656.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

unity 使用Base64编码工具对xml json 或者其他文本进行加密 解密

unity 使用Base64编码工具对xml json 或者其他文本进行加密 解密

Base64编码加密解密工具 这是一个加密解密的网页工具&#xff0c;别人可以把他加密后的字符串给你&#xff0c;然后你可以用代码解密出来&#xff0c; 或者自己对内容进行加密&#xff0c;解密处理。 /// <summary>/// Base64 解码/// </summary>string DecodeBase…
阅读更多...
Canal1.1.5整Springboot在MQ模式和TCP模式监听mysql

Canal1.1.5整Springboot在MQ模式和TCP模式监听mysql

canal本实验使用的是1.1.5&#xff0c;自行决定版本&#xff1a;[https://github.com/alibaba/canal/releases] canal 涉及的几个角色 canal-admin&#xff1a;canal 后台管理系统&#xff0c;管理 canal 服务canal-deployer&#xff1a;即canal-server&#xff08;客户端&…
阅读更多...
基于rip环境下的MGRE综合实验

基于rip环境下的MGRE综合实验

实验要求 1、R5为ISP&#xff0c;只能进行IP地址配置&#xff0c;其所有地址均配为公有IP地址。 2、&#xff08;1&#xff09;R1和R5间使用PPP的PAP认证&#xff0c;R5为主认证方。 &#xff08;2&#xff09;R2与R5之间使用ppp的CHAP认证&#xff0c;R5为主认证方。 &#…
阅读更多...
权限管理系统【BUG】

权限管理系统【BUG】

1.1.简介 忙里偷闲&#xff0c;学点Java知识。越发觉得世界语言千千万&#xff0c;最核心的还是思想&#xff0c;一味死记硬背只会让人觉得很死板不灵活&#xff0c;嗯~要灵活~ 1.2.问题 permission.js:37 [Vue warn]: Error in render: "TypeError: Cannot read prope…
阅读更多...
洛谷P1000超级玛丽游戏题解[Python, Rust, Go]

洛谷P1000超级玛丽游戏题解[Python, Rust, Go]

题目 打印超级玛丽字符图像 小技巧 直接复制题目的超级玛丽符号首行会有空格问题&#xff0c;一直AC不过&#xff0c;一行一行地复制就OK了&#x1f44c;。 Rust 题解 fn main() {println!(" ********************####....#.#..###.....##....###...…
阅读更多...
【机器学习300问】61、逻辑回归与线性回归的异同？

【机器学习300问】61、逻辑回归与线性回归的异同？

本文讲述两个经典机器学习逻辑回归&#xff08;Logistic Regression&#xff09;和线性回归&#xff08;Linear Regression&#xff09;算法的异同&#xff0c;有助于我们在面对实际问题时更好的进行模型选择。也能帮助我们加深对两者的理解&#xff0c;掌握这两类基础模型有助…
阅读更多...
uniapp中安装vant2

uniapp中安装vant2

1.uniapp项目搭建 因为是安装vant2所以项目选择vue2&#xff0c;如果vue3项目的话安装vant3&#xff0c;vue3可能不适合这样安装方式 2.安装vant npm i vantlatest-v2 3.在main.js文件引入挂载vant 说明&#xff1a;// #ifndef VUE3这里是vue2模板用来挂载注册组件的地方&a…
阅读更多...
1.Git是用来干嘛的

1.Git是用来干嘛的

本文章学习于【GeekHour】一小时Git教程&#xff0c;来自bilibili Git就是一个文件管理系统&#xff0c;这样说吧&#xff0c;当多个人同时在操作一个文件的同时&#xff0c;很容易造成紊乱&#xff0c;git就是保证文件不紊乱产生的 包括集中式管理系统和分布式管理系统 听懂…
阅读更多...
【Python】记录槽位法：Leetcode 894. 所有可能的真二叉树

【Python】记录槽位法：Leetcode 894. 所有可能的真二叉树

描述 给你一个整数 n &#xff0c;请你找出所有可能含 n 个节点的 真二叉树 &#xff0c;并以列表形式返回。答案中每棵树的每个节点都必须符合 Node.val 0 。 答案的每个元素都是一棵真二叉树的根节点。你可以按 任意顺序 返回最终的真二叉树列表。 真二叉树 是一类二叉树…
阅读更多...
【NLP】LLM 和 RAG

【NLP】LLM 和 RAG

在这里&#xff0c;我描述了我在过去几年中关于 RAG 系统如何发展的主要经验。分享 Naive RAG、Advanced RAG 和 Modular RAG 框架之间的区别。总结了高云帆等人发表的一篇出色的RAG 技术调查论文的关键见解。 什么是 RAG 框架&#xff1f; OpenAI的GPT系列、Meta的LLama系列…
阅读更多...
Python程序设计 多重循环（二）

Python程序设计 多重循环（二）

1.打印数字图形 输入n&#xff08;n<9)&#xff0c;输出由数字组成的直角三角图形。例如&#xff0c;输入5&#xff0c;输出图形如下 nint(input("")) #开始 for i in range(1,n1):for j in range(1,i1):print(j,end"")print()#结束 2.打印字符图形 …
阅读更多...
牛客NC181 单词拆分(一)【中等 动态规划，前缀树 Java,Go,PHP】

牛客NC181 单词拆分(一)【中等 动态规划，前缀树 Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/c0d32c1ce5744472a01b2351a2c2767f 思路 前缀树动态规划参考答案Java import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规…
阅读更多...
即刻体验 | 使用 Flutter 3.19 更高效地开发

即刻体验 | 使用 Flutter 3.19 更高效地开发

我们已隆重推出全新的 Flutter 版本——Flutter 3.19。此版本引入了专为 Gemini 设计的新 Dart SDK、一个能让开发者对 Widget 动画实现精细化控制的全新 Widget&#xff0c;Impeller 更新带来的渲染性能提升、有助于实现深层链接的工具和对 Windows Arm64 的支持&#xff0c;以…
阅读更多...
JVM—类加载子系统

JVM—类加载子系统

JVM—类加载子系统 JVM的类加载是通过ClassLoader及其子类来完成的。 有哪些类加载器 类加载器如下&#xff1a; 启动类加载器&#xff08;BootStrap ClassLoader&#xff09;&#xff1a;负责加载JAVA_HOME\lib目录或通过-Xbootclasspath参数指定路径中的且被虚拟机认可&am…
阅读更多...
Linux|centos7|postgresql数据库主从复制之异步还是同步的问题

Linux|centos7|postgresql数据库主从复制之异步还是同步的问题

前言&#xff1a; postgresql数据库是一个比较先进的中型关系型数据库&#xff0c;原本以为repmgr和基于repmgr的主从复制是挺简单的一个事情&#xff0c;但现实很快就给我教育了&#xff0c;原来postgresql和MySQL一样的&#xff0c;也是有异步或者同步的复制区别的 Postgre…
阅读更多...
物联网实战--入门篇之(十)安卓QT--后端开发

物联网实战--入门篇之(十)安卓QT--后端开发

目录 一、项目配置 二、MQTT连接 三、数据解析 四、数据更新 五、数据发送 六、指令下发 一、项目配置 按常规新建一个Quick空项目后&#xff0c;我们需要对项目内容稍微改造、规划下。 首先根据我们的需要在.pro文件内添加必要的模块&#xff0c;其中quick就是qml了&…
阅读更多...
Springboot集成knife4j (swagger)

Springboot集成knife4j (swagger)

1、添加依赖 在pom.xml 文件中添加 knife4j-spring-boot-starter 的依赖 <dependency> <groupId>com.github.xiaoymin</groupId> <artifactId>knife4j-spring-boot-starter</artifactId> <version>3.0.3</version> </depe…
阅读更多...
TCP、UDP协议

TCP、UDP协议

TCP与UDP协议的区别 TCP&#xff08;Transmission Control Protocol&#xff09;和UDP&#xff08;User Datagram Protocol&#xff09;是两种常用的传输层协议&#xff0c;它们之间有以下几点区别&#xff1a; 1. 连接性&#xff1a; - TCP是面向连接的协议&#xff0c;通…
阅读更多...
玩转ChatGPT：Kimi测评（科研写作）

玩转ChatGPT：Kimi测评（科研写作）

一、写在前面 ChatGPT作为一款领先的语言模型&#xff0c;其强大的语言理解和生成能力&#xff0c;让无数用户惊叹不已。然而&#xff0c;使用的高门槛往往让国内普通用户望而却步。 最近&#xff0c;一款由月之暗面科技有限公司开发的智能助手——Kimi&#xff0c;很火爆哦。…
阅读更多...
VMware-16.0配置虚拟机网络模式

VMware-16.0配置虚拟机网络模式

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、为什么要配置网络&#xff1f;二、配置步骤1.检查VMware服务2.进入配置页面3.添加网络模式1.Bridge2.NAT3.Host-only 4.DHCP租约5.静态IP 三、使用总结 前言…
阅读更多...
最新文章

Copyright @ 2022~2023