Dynamic solution animate css

Time:2022-6-8

1、 Animate CSS is a cross browser dynamic effect basic library and a solution for many basic dynamic effects. It has everything from the classic bounce effect to the unique twist effect.

Dynamic solution animate css

2、 Function introduction

Animation can improve the user experience of the interface through built-in animation. Through JS, users can freely control the animation,

3、 Installation

npm install animate.css –save
Vue item main JS

import "animate.css"

Note: animate must be added to the element__ The animated class

4、 Scenario practice

The following are the demos I made in my spare time. They are only provided for scenario guidance. Please expand more scenarios by yourself

1.dialog Popup

<div >
    <button @click= "opendialog" > Open popup </button>
    <div v-show="isOpen"
      @click="closeDialog($event)"
    >
      <div>
        <p>I am a pop-up window~~~</p>
      </div>
    </div>
  </div>
<script>
export default {
  name: 'Home',
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    openDialog() {
      this.isOpen = true;
      let oMask = document.getElementsByClassName('mask')[0];
      let oDialog = document.getElementsByClassName('dialog')[0];
      oMask.classList.remove('animate__fadeOut');
      oDialog.classList.remove('animate__zoomOut')
      oMask.classList.add('animate__fadeIn')
      oDialog.classList.add('animate__zoomIn')
    },
    closeDialog(e) {
      if(e.target.className.indexOf('mask') != -1){
        let oMask = document.getElementsByClassName('mask')[0];
        let oDialog = document.getElementsByClassName('dialog')[0];
        oMask.classList.remove('animate__fadeIn');
        oMask.classList.add('animate__fadeOut')
        oDialog.classList.remove('animate__zoomIn')
        oDialog.classList.add('animate__zoomOut')
        setTimeout(() => {
          this.isOpen = false;
        }, 330);
      }
      
    }
  },
}
</script>

<style lang="less" scoped>
    .home {
      position: relative;
      height: 100%;
      background: rgb(251, 252, 251);
    }
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(92, 92, 92,.5);
      display: flex;
      justify-content: center;
      align-items: center;
      
      .dialog {
        width: 70%;
        height: 50vh;
        background: #fff;
        border-radius: 8px;
      }
    }
</style>

2. list deletion

<template>
  <div >
    <ul>
      <li v-for="(item,index) of 8" :key="index">
        <button @click= "delete ($event)" > delete </button>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return { 
      }
    },
    methods: {
      delate(e){
        e.target.parentElement.classList.add('animate__fadeOutTopRight')
        e.target.parentElement.classList.add('hidden')
      }
    }
  }
</script>

<style lang="less" scoped>
  .about {
    height: 100%;
    background: rgb(22, 174, 235);
    padding: 15px;
    ul{
      margin: 0;
      padding: 0;
      border-radius: 6px;
      overflow: hidden;
      li {
        padding: 0 20px;
        margin-bottom: 6px;
        list-style: none;
        height: 80px;
        background: #fff;
        line-height: 80px;
        text-align: right;
        border-radius: 6px;
        transition: height 330ms 220ms ease-in;
        &.hidden {
          height: 0;
        }
        button {
          align-self: flex-end;
          width: 90px;
          height: 36px;
          border: none;
          background: orange;
          color: #fff;
          border-radius: 6px;
          box-shadow: 1px 1px 8px #ccc;
          outline: none;
          cursor: pointer;
        }
      }
    }
  }
</style>

3. visual prompt

<template>
    <div>
        <ul>
            <li>
                <img src="../assets/clock.png">
            </li>
            <li>
                <img src="../assets/heart.png">
            </li>
            <li>
                <img src="../assets/location.png">
            </li>
        </ul>
    </div>
</template>

<style lang="less" scoped>
    .demo02 {
        ul {
            margin: 0;
            padding: 0;
            li {
                padding: 50px 0;
                list-style: none;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 30%;
                }
            }
        }
    }
</style>

4. slide the card left and right

<template>
    <div>
        <ul @touchstart="handleTouchstart($event)" @touchend="handleTouchend($event)">
            <li></li>
            <li style="background: orange"></li>
            <li style="background: blue"></li>
            <li style="background: pink"></li>
            <li style="background: purple"></li>
             <li style="background: blue"></li>
            <li style="background: pink"></li>
            <li style="background: purple"></li>
        </ul>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                startTime: '',
                startX: '',
                startY: '',
            }
        },
        methods: {
            //Finger press
            handleTouchstart(e){
                this.startTime = Date.now();
                this.startX  = e.changedTouches[0].clientX;
                this.startY = e.changedTouches[0].clientY;
            },
            //Finger away
            handleTouchend(e) {
                const endTime = Date.now();
                const endX = e.changedTouches[0].clientX;
                const endY = e.changedTouches[0].clientY;
                //Judge the duration of pressing
                if(endTime - this.startTime > 2000){
                    return;
                }
                //Sliding direction
                let direction = '';
                if(Math.abs(endX - this.startX ) > 10) {
                    if(Math.abs(endY - this.startY) > 30 ){
                        return;
                    }else {
                        direction = endX - this.startX > 0?"right":'left'
                    }
                }else {
                    return;
                }
                if(direction == 'left'){
                    console.log(e.target);
                    e.target.classList.add('animate__fadeOutLeftBig')
                }else {
                    e.target.classList.add('animate__fadeOutRightBig')
                }

            }
        },
    }
</script>

<style lang="less" scoped>
    .demo03 {
        overflow: hidden;
        ul {
            margin: 140px auto;
            position: relative;
            width: 50%;
            height: 340px;
            li {
                list-style: none;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                position: absolute;
                background: skyblue;
            }
        }
    }
</style>