How to use css to write the pop-up menu effect and its use
1. Core knowledge points
(1) Pop-up menu: animation animation, transform attribute
(2) Language switching function: click event function catchtap , custom attribute data- *
2. Realize the effect
3. Pay attention to the decomposition
4. Code source code
<view class="container" id="index">
<view class="content-text" style="margin-top: {
{
navBtnTop + 38}}px;">
<text>{
{poster[isType-1].content.name}}</text>
<text>{
{poster[isType-1].content.des}}</text>
</view>
<view class="model-bg" wx:if="{
{isBtnShow}}" catchtap="btnPop"></view>
<view class="change-language">
<view class="lang-box">
<text class="lang-btn" catchtap="btnPop">语言\n切换</text>
<block wx:if="{
{!isFirstShow}}">
<view class="box-text {
{isBtnShow ? 'a1':'a10'}}" data-id="1" catchtap="changeLanguage">
<text class="lang-text">中文</text>
</view>
<view class="box-text {
{isBtnShow ? 'a2':'a20'}}" data-id="2" catchtap="changeLanguage">
<text class="lang-text">英文</text>
</view>
<view class="box-text {
{isBtnShow ? 'a3':'a30'}}" data-id="3" catchtap="changeLanguage">
<text class="lang-text">日语</text>
</view>
<view class="box-text {
{isBtnShow ? 'a4':'a40'}}" data-id="4" catchtap="changeLanguage">
<text class="lang-text">韩语</text>
</view>
<view class="box-text {
{isBtnShow ? 'a5':'a50'}}" data-id="5" catchtap="changeLanguage">
<text class="lang-text">德语</text>
</view>
</block>
</view>
</view>
</view>
.container {
position: relative;
width: 100vw;
height: auto;
}
text {
display: block;
}
/* 模态框 */
.model-bg {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
z-index: 999;
}
/* 内容区 */
.content-text {
position: relative;
padding: 20rpx 0;
text-align: center;
}
/* 按钮菜单 */
.change-language {
position: fixed;
top: 50%;
right: 20rpx;
transform: translateY(-50%);
z-index: 9999;
}
.lang-box {
position: relative;
top: 0;
right: 0;
}
.lang-btn {
position: absolute;
top: 0;
right: 0;
width: 60rpx;
height: 60rpx;
color: #fff;
font-size: 22rpx;
text-align: center;
padding: 10rpx;
border-radius: 15%;
background-color: #CC463D;
z-index: 99;
}
.box-text {
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
.lang-text {
width: 60rpx;
height: 30rpx;
color: #fff;
font-size: 20rpx;
text-align: center;
padding: 10rpx;
border-radius: 8%;
background-color: #CC463D;
}
/* 菜单动画 */
.a1 {
animation: a1 500ms ease-out forwards;
}
@keyframes a1 {
0% {
transform: translate(0, 0) rotateZ(0deg);
opacity: 0;
}
100% {
transform: translate(-15px, -75px) rotateZ(360deg);
opacity: 1;
}
}
.a10 {
animation: a10 500ms ease-out forwards;
}
@keyframes a10 {
0% {
transform: translate(-15px, -75px) rotateZ(360deg);
opacity: 1;
}
100% {
transform: translate(0, 0) rotateZ(0deg);
opacity: 0;
}
}
.a2 {
animation: a2 500ms ease-out forwards;
}
@keyframes a2 {
0% {
transform: translate(0, 0) rotateZ(0deg);
opacity: 0;
}
100% {
transform: translate(-65px, -35px) rotateZ(360deg);
opacity: 1;
}
}
.a20 {
animation: a20 500ms ease-out forwards;
}
@keyframes a20 {
0% {
transform: translate(-65px, -35px) rotateZ(360deg);
opacity: 1;
}
100% {
transform: translate(0, 0) rotateZ(0deg);
opacity: 0;
}
}
.a3 {
animation: a3 500ms ease-out forwards;
}
@keyframes a3 {
0% {
transform: translate(0, 0) rotateZ(0deg);
opacity: 0;
}
100% {
transform: translate(-95px, 10px) rotateZ(360deg);
opacity: 1;
}
}
.a30 {
animation: a30 500ms ease-out forwards;
}
@keyframes a30 {
0% {
transform: translate(-95px, 10px) rotateZ(360deg);
opacity: 1;
}
100% {
transform: translate(0, 0) rotateZ(0deg);
opacity: 0;
}
}
.a4 {
animation: a4 500ms ease-out forwards;
}
@keyframes a4 {
0% {
transform: translate(0, 0) rotateZ(0deg);
opacity: 0;
}
100% {
transform: translate(-65px, 55px) rotateZ(360deg);
opacity: 1;
}
}
.a40 {
animation: a40 500ms ease-out forwards;
}
@keyframes a40 {
0% {
transform: translate(-65px, 55px) rotateZ(360deg);
opacity: 1;
}
100% {
transform: translate(0, 0) rotateZ(0deg);
opacity: 0;
}
}
.a5 {
animation: a5 500ms ease-out forwards;
}
@keyframes a5 {
0% {
transform: translate(0, 0) rotateZ(0deg);
opacity: 0;
}
100% {
transform: translate(-15px, 90px) rotateZ(360deg);
opacity: 1;
}
}
.a50 {
animation: a50 500ms ease-out forwards;
}
@keyframes a50 {
0% {
transform: translate(-15px, 90px) rotateZ(360deg);
opacity: 1;
}
100% {
transform: translate(0, 0) rotateZ(0deg);
opacity: 0;
}
}
Page({
/**
* 页面的初始数据
*/
data: {
poster: [
{
type: 1,
lang: '中文',
content: {
name: '糖葫芦呀',
des: '你好呀，哈哈哈哈，我是糖葫芦'
}
},
{
type: 2,
lang: '英文',
content: {
name: 'Tomatoes on sticks',
des: 'Hello, ha, I am Tomatoes on sticks.'
}
},
{
type: 3,
lang: '日语',
content: {
name: '砂糖ひょうたんか',
des: 'どうも、はは、私は糖ひょうたんです'
}
},
{
type: 4,
lang: '韩语',
content: {
name: '탕후루야',
des: '안녕하세요. 하하하하. 저는 설탕박이에요.'
}
},
{
type: 5,
lang: '德语',
content: {
name: 'Tomaten auf Stäbchen',
des: 'Hallo, ha, ich bin "Tomaten auf den Stöcken".'
}
}
],
isType: 1, //当前语言类型
isFirstShow: true, //是否第一次进入（这个是为了阻止第一次进入页面菜单执行往回收的动画）
isBtnShow: null, //是否已经弹出
},
onLoad: function (options) {
app.onNavLoading();
console.log('我是你当前选择的语言类型', this.data.isType)
},
//打开切换菜单
btnPop() {
this.setData({
isFirstShow: false,
isBtnShow: !this.data.isBtnShow
})
},
//点击切换语言
changeLanguage(e){
console.log(e.currentTarget.dataset.id);
var num = e.currentTarget.dataset.id;
this.setData({
isType: num
})
this.btnPop();
}
})
5. Write at the end
The above are some exercises in my project~, if you find it useful, remember to like + follow + bookmark, let’s work hard on the front-end road together!
Menu animation effect reference link: https://blog.csdn.net/qq_48085286/article/details/122400611
Publish -> WeChat Mini Program: css pop-up menu + multi-language switching function WeChat Mini Program: css pop-up menu + multi-language switching function WeChat Mini Program: css pop-up menu + multi-language switching function
Publish Multi-language switching function WeChat applet: css pop-up menu + multi-language switching function WeChat applet: css pop-up menu + multi-language switching function Release + Multi-language switching function WeChat applet: css pop-up menu + multi-language switching function Release -> WeChat applet: css pop-up menu + multi-language switching function WeChat applet: css pop-up menu + multi-language switching function WeChat applet: css pop-up Menu + multi-language switching function release -> WeChat applet: css pop-up menu + multi-language switching function WeChat applet: css pop-up menu + multi-language switching function WeChat applet: css pop-up menu + multi-language switching function release -> WeChat applet Program: css pop-up menu + multi-language switching function Wechat applet: css pop Small program: css pop-up menu + multi-language switching function WeChat small program: css pop-up menu + multi-language switching function Release > WeChat small program: css pop-up menu + multi-language switching function WeChat small program: css pop-up menu + multi-language switching function WeChat Mini Program: css pop-up menu + multi-language switching function Release -> WeChat Mini Program: css pop-up menu + multi-language switching function WeChat Mini Program: css pop-up menu + multi-language switching function WeChat Mini Program: css pop-up menu + multi-language switching function Function Distribution -> WeChat applet: css pop-up menu + multi-language switching function WeChat applet: css pop-up menu + multi-language switching function WeChat applet: css pop-up menu + multi-language switching functionPublish -> WeChat Mini Program: css pop-up menu + multi-language switching function WeChat Mini Program: css pop-up menu + multi-language switching function WeChat Mini Program: css pop-up menu + multi-language switching function Publish Multi-language switching function WeChat applet: css pop-up menu + multi-language switching function WeChat applet: css pop-up menu + multi-language switching function