Note: animation must use v-if || v-show
1. Implementation of Vue2 with Css3
We need to use the transition tag <transition>:
<transition name="hello" appear> <h1 v-show="isShow">你好啊!</h1> </transition> :appear="true" [值需要的是布尔值,所以需要用v-bind绑定] 也可以直接写 【appear】 appear 使用效果是:打开页面立马执行一次过来的动画
css3 solution 1: set animation in the style tag
[The name of the style for come and go is defined as v-enter-active | v-leave-active, to set the value of name, you need to change v to it]
<style> h1 { background-color: orange; } /* 如果过渡标签加了name属性,下面的v需要改为name的值 .v-enter-active { animation: gbase 1s; } .v-leave-active { animation: gbase 1s reverse; } */ .hello-enter-active { animation: gbase 1s; } .hello-leave-active { animation: gbase 1s reverse; } @keyframes gbase { from { transform: translateX(-100%); } to { transform: translateX(0px); } } </style>
Note: <transition> is gone when vue parses
source code
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <!--//todo 使用动画 [ 标签必须使用v-if||v-show才行 ] //todo 1、使用 过渡 标签 <transition> 【里面有一个属性name 标志它的名字】 //todo 2、在样式style标签里面设置动画 //todo 3、给来和走的样式的名字定义为 v-enter-active | v-leave-active 【设置name的值,需要把v 改成它】 --> <!-- //? 注意 vue解析的时候 <transition> 就没有了 --> <!-- //todo :appear="true" [值需要的是布尔值,所以需要用v-bind绑定] 也可以直接写 【appear】 //* appear 使用效果是:打开页面立马执行一次过来的动画 --> <transition name="hello" appear> <h1 v-show="isShow">你好啊!</h1> </transition> </div> </template> <script> export default { name: "Test", data() { return { isShow: true, }; }, }; </script> <style> h1 { background-color: orange; } .hello-enter-active { animation: gbase 1s; } .hello-leave-active { animation: gbase 1s reverse; } @keyframes gbase { from { transform: translateX(-100%); } to { transform: translateX(0px); } } </style>
-
Other attribute styles
Only one DOM tag can be used in the <transition> tag
Using <transition-group>, you can put multiple tags in it to use animation [but the tag with animation inside needs to add a unique identification key ]
<transition-group name="hello" appear> <h1 v-show="isShow" key="1">你好啊!</h1> <h1 v-show="!isShow" key="2">我不好啊!</h1> </transition-group>
css3 scheme 2
<style> h1 { background-color: orange; /* transition: 0.5 linear; */ } todo 进入的起点 .hello-enter { transform: translateX(-100%); } todo 进入的终点 .hello-enter-to { transform: translateX(0px); } todo 离开的起点 .hello-leave { transform: translateX(0px); } todo 离开的终点 .hello-leave-to { transform: translateX(-100%); } 简写 :进入的起点 就是 离开的终点 .hello-enter, .hello-leave-to { transform: translateX(-100%); } .hello-enter-active, .hello-leave-active { 或者写在需要加动画的标签里面 transition: 0.5 linear; } 简写 :进入的终点 就是 离开的起点 .hello-enter-to, .hello-leave { transform: translateX(0px); } </style>
2. Vue2 uses animation with animate library
npm install animate.css : install and use animation library
import "animate.css"; import the library
设置 name="animate__animated animate__bounce"
Go to https://animate.style/ to find the animation, and assign the name of the animation to the two attributes of enter-active-class and leave-active-class
<transition-group name="animate__animated animate__bounce" appear enter-active-class="animate__jackInTheBox" leave-active-class="animate__fadeOut" > <h1 v-show="isShow" key="1">你好啊!</h1> </transition-group>
source code
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <!-- // todo 2、设置 name="animate__animated animate__bounce" --> <!-- // todo 3、去https://animate.style/ 里面找动画 --> <transition-group name="animate__animated animate__bounce" appear enter-active-class="animate__jackInTheBox" leave-active-class="animate__fadeOut" > <h1 v-show="isShow" key="1">你好啊!</h1> </transition-group> </div> </template> // npm install animate.css : 安装并使用动画库 <script> // todo 1、因为是一个样式,可以直接引入文件 import "animate.css"; export default { name: "Test", data() { return { isShow: true, }; }, }; </script> <style> h1 { background-color: orange; /* transition: 0.5 linear; */ } </style>