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

创建进入时的动画:

这一步很简单

index.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>test3</title><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="cover coverFlag"></div> --><div class="button"><div class="icon1"></div><div class="icon2"></div></div></div>
</body><!-- jQuery cdn -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<!-- less.js cdn -->
<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>test3</title><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>
<!-- jQuery cdn -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<!-- less.js cdn -->
<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;}
}

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

02_使用jq实现进入和离开动画相关推荐

JQ彩色3D纸片折叠动画
JQ彩色3D纸片折叠动画闲着无聊做了一个玩~ 因是JQ制作,开始前请引入js <script src="http://libs.baidu.com/jquery/1.8.3/jque ...
Vue 进入/离开动画
1.示例代码 (注:写到vue单文件中了) <template><div><button v-on:click="show = !show">T ...
android activity跳转多次闪退_Android实现Activity和Fragment的跳转动画
1.使用overridePendingTransition方法实现Activity跳转动画 botton_in <?xml version="1.0" encoding=&q ...
Android Activity和Fragment的转场动画
Activity转场动画 Activity的转场动画是通过overridePendingTransition(int enterAnim, int exitAnim)实现的. 这个方法是API Lev ...
jQ.Mobi框架介绍
jQ.Mobi是基于HTML5重写的jQuery框架,由appMobi开发并且开源托管于github,在此有简易的在线文档提供查阅. jQ.Mobi相比于其他方案具有体积小速度快的优势. jQ.Mob ...
[Android]Fragment自定义动画、动画监听以及兼容性包使用
Fragment是Android在API 11之后加入的一个组件,对提高Android开发中的布局合理性和布局效率都有很大作用,尤其是在Android平板等大屏幕设备的开发中,Fragment的引入能 ...
Vue.js 进入/离开列表过渡
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate. ...
Vue009_过渡动画
vue 动画的理解 1) 操作 css 的 trasition 或 animation 2) vue 会给目标元素添加/移除特定的 class 3) 过渡的相关类名 xxx-enter-active ...
改变Fragment的默认动画
FragmentTransaction ft = getFragmentManager().beginTransaction(); //设置进入退出动画 ft.setCustomAnimations( ...

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

创建进入时的动画:

为其添加离开动画

02_使用jq实现进入和离开动画相关推荐

最新文章

热门文章