02_使用jq实现进入和离开动画

创建进入时的动画:

这一步很简单

index.html:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test3title>
    <link rel="stylesheet" type="text/less" href="./css/index.less">
    <link rel="stylesheet" type="text/less" href="./css/animate.less">
head>

<body>
    <div class="test">
        
        <div class="button">
            <div class="icon1">div>
            <div class="icon2">div>
        div>
    div>
body>


<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
    integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous">script>

<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.js">script>
<script src="./js/index.js">script>

html>

index.less文件

.testBackgroundColor {
  background: rebeccapurple;
}

.test {
  display: flex;
  width: 100rem;
  height: 50rem;
  background: rebeccapurple;

  .button {
    position: relative;
    display: flex;
    background: gray;
    width: 25rem;
    height: 25rem;
    border-radius: 25rem;
    z-index: 3;

    .icon1,
    .icon2 {
      display: flex;
      position: absolute;
      border-radius: 2rem;
      background: aliceblue;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .icon1 {
      width: 15rem;
      height: 5rem;
    }

    .icon2 {
      width: 5rem;
      height: 15rem;
    }
  }
}

.cover {
  display: flex;
  position: absolute;
  width: 100rem;
  height: 50rem;
  background: rebeccapurple;
  z-index: 2;
}

.toggleColor {
  animation-name: backgroundChange;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
}


//下面是两个button按钮切换角度的类名
.buttonRotate {
  transform: rotate(45deg);
  transition: transform .6s ease-in-out;
}

animate.less:(index.less中调用的动画):

//改变背景颜色
@keyframes backgroundChange {
  from {
    background: #663399;
  }
  to {
    background: black;
  }
}

效果如下(背景色有过渡动画,大号按钮的角度变化也有过渡动动画,但是再次点击恢复时,按钮和背景都没有恢复动画):
在这里插入图片描述
在这里插入图片描述

为其添加离开动画

(第二次点击恢复原状时动画不会那么突兀)

  • 为按钮添加离开动画:

思路: 需要在执行了buttonRotate这个css类之后,将.button的角度变为0,切需要有动画执行的时间

这个只需要在.button中添加一个类buttonRotateReverse,它的代码是:

<-- 为button在html中添加类名 -->
<div class="button buttonRotateReverse">
	<div class="icon1">div>
	<div class="icon2">div>
div>

//index.less中添加的代码:
.buttonRotateReverse {
  transform: rotate(0deg);
  transition: transform .6s ease-in-out;
}

// js中需要修改的部分(点击切换类名):
$('.button').toggleClass('buttonRotate').toggleClass('buttonRotateReverse')

在点击button之后,切换css类名即可,效果:

此时按钮有进入和离开动画,并且很丝滑,就是背景没有离开动画,改变颜色是变化的很突兀

此时button有了离开动画,接下来需要为button后面的背景添加离开动画

如果按照上面的为button添加离开动画的方法为背景添加动画是错的,效果会出错:

硬刷新时,背景会出现背景离开的动画(颜色由黑变紫)

此时点击开始和恢复时都有动画,但是在第一次进入页面时会有一瞬间背景色由黑变紫(在背景元素中有一个类名元素由黑变紫,改类名用以处理背景色恢复时的动画)

而出现这种情况时,可以考虑在背景上添加一个z-index为2的蒙版,button的z-index为3,在点击button时,将蒙版移除

代码:
html:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test3title>
    <link rel="stylesheet" type="text/less" href="./css/index.less">
    <link rel="stylesheet" type="text/less" href="./css/animate.less">
head>

<body>
    <div class="test toggleColorReverse">
        <div class="cover coverFlag">div>
        <div class="button buttonRotateReverse">
            <div class="icon1">div>
            <div class="icon2">div>
        div>
    div>
body>

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
    integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous">script>

<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.js">script>
<script src="./js/index.js">script>

html>

js:

$('.button').on('click', function () {
    $('.coverFlag').removeClass('cover')
    $('.test').toggleClass('toggleColor').toggleClass('toggleColorReverse')
    $('.button').toggleClass('buttonRotate').toggleClass('buttonRotateReverse')
})

index.less:

.testBackgroundColor {
  background: rebeccapurple;
}

.test {
  display: flex;
  width: 100rem;
  height: 50rem;
  background: rebeccapurple;

  .button {
    position: relative;
    display: flex;
    background: gray;
    width: 25rem;
    height: 25rem;
    border-radius: 25rem;
    z-index: 3;

    .icon1,
    .icon2 {
      display: flex;
      position: absolute;
      border-radius: 2rem;
      background: aliceblue;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .icon1 {
      width: 15rem;
      height: 5rem;
    }

    .icon2 {
      width: 5rem;
      height: 15rem;
    }
  }
}

.cover {
  display: flex;
  position: absolute;
  width: 100rem;
  height: 50rem;
  background: rebeccapurple;
  z-index: 2;
}

.toggleColor {
  animation-name: backgroundChange;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
}

.toggleColorReverse {
  animation-name: backgroundChangeReverse;
  animation-duration: 0.6s;
  //animation-fill-mode: forwards;
  //transform: ;
}


//下面是两个button按钮切换角度的类名
.buttonRotate {
  transform: rotate(45deg);
  transition: transform .6s ease-in-out;
}

.buttonRotateReverse {
  transform: rotate(0deg);
  transition: transform .6s ease-in-out;
}

animate.less:

//改变背景颜色
@keyframes backgroundChange {
  from {
    background: #663399;
  }

  to {
    background: black;
  }
}

@keyframes backgroundChangeReverse {
  from {
    background: black;
  }

  to {
    background: #663399;
  }
}

此时 ,硬刷新也不会出现结束动画,效果符合预期

相关

标签