动画库 animate.css网址和使用方法 `https://animate.style/`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="https://unpkg.com/vue@next"></script>
    <!-- 引入动画库 -->
    <!-- 动画库 animate.css网址 https://animate.style/ -->
    <!-- 使用方法也网址里面 -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <!-- 引入动画库以后就可以不用设置style样式了 -->
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    const app = Vue.createApp({
      // 变量
      data() {
        return {
          show: true,
        };
      },
      //逻辑
      methods: {
        toggle() {
          this.show = !this.show;
        },
      },
      template: `
        <transition 
	
		enter-active-class="animate__animated animate__bounceIn"

		leave-active-class="animate__animated animate__bounceOut"
	>
		<h1 v-if="show" >hello world</h1>
	</transition>

	<button @click="toggle">切换</button>



        `,
    });
    const vm = app.mount("#root");
  </script>
</html>

vue中使用 Animate动画库，transition标签实现过渡动画效果

动画库 animate.css网址和使用方法 https://animate.style/

动画库 animate.css网址和使用方法 `https://animate.style/`