前端基础之动画效果

简单的入场与出场

<template>

  <div>

    <button @click="isShow=!isShow">显示/隐藏button>

    <transition name="hello" appear>

    <h1 v-show="isShow"  >helloh1>

    transition>

  div>

template>

<script>

export default {

    name:'Test',

    data(){

        return{

            isShow:true

        }

    }

}

script>

<style scoped>

h1{

    background-color: orange;

}

.hello-enter-active{              /* 进入的动画 */

  animation: atguigu 0.5s ;

}

.hello-leave-active{              /*退出的动画  */

  animation: atguigu 0.5s ;

}

@keyframes atguigu {

  from{

    transform: translateX(-100px);

  }

  to{

    transform: translateX(0px);

  }

}

style>

<>

过度效果

<template>

  <div>

    <button @click="isShow=!isShow">显示/隐藏button>

    <transition name="hello" appear>

    <h1 v-show="isShow"  >hello2h1>

    transition>

  div>

template>

<script>

export default {

    name:'Test',

    data(){

        return{

            isShow:true

        }

    }

}

script>

<style scoped>

h1{

    background-color: orange;

   

}

.hello-enter-active,.hello-leave-active{              /* 进入过程和退出过程 */

  transition: 0.5s linear;

}

.hello-enter,.hello-leave-to{                   /* 进入的起点与离开的终点 */

  transform: translateX(-100%);

}

.hello-enter-to ,.hello-leave{                /*进入的终点与离开的起点*/

  transform: translateX(0);

}

style>

实现的动画效果与上面的一致

集成第三方库

1.首先需要进行下载

 npm install animate.css --save

2.标签中的name设置为

"animate__animated animate__bounce"  

在Animate.css | A cross-browser library of CSS animations.

中找到合适的动画的名称，进入复制

<template>

  <div>

    <button @click="isShow = !isShow">显示/隐藏button>

    <transition

          name="animate__animated animate__bounce"        

          appear

          enter-active-class="animate__swing"

          leave-active-class="animate__backOutUp">

      <h1 v-show="isShow">hello3h1>

    transition>

  div>

template>

<script>

import 'animate.css'; // 确保 animate.css 已经被正确导入

export default {

  name: 'Test',

  data() {

    return {

      isShow: true

    }

  }

}

script>

<style scoped>

h1 {

  background-color: orange;

}

style>

<>