Como usar css para escrever o efeito do menu pop-up e seu uso
1. Pontos básicos de conhecimento
(1) Menu pop-up: animação de animação , atributo de transformação
(2) Função de troca de idioma: clique na função de evento catchtap , dados de atributos personalizados- *
2. Perceba o efeito
3. Preste atenção na decomposição
4. Código fonte do código
<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. Escreva no final
Os exercícios acima são alguns do meu projeto ~, se você achar útil, lembre-se de curtir + seguir + marcar, vamos trabalhar duro juntos na estrada do front-end!
Link de referência do efeito de animação do menu: https://blog.csdn.net/qq_48085286/article/details/122400611
Publicar -> WeChat Mini Program: menu pop-up css + função de troca de vários idiomas WeChat Mini Program: menu pop-up css + função de troca de vários idiomas WeChat Mini Program: menu pop-up css + função de troca de vários idiomas
Publicar função de alternância multilíngue Miniaplicativo WeChat: menu pop-up css + função de alternância multilíngue Miniaplicativo WeChat: menu pop-up css + função de alternância multilíngue Release função de alternância multilíngue Miniaplicativo WeChat: menu pop-up css + função de alternância multilíngue Solte -> miniaplicativo WeChat: menu pop-up css + função de comutação multilíngue Miniaplicativo WeChat: menu pop-up css + função de comutação multilíngue Miniaplicativo WeChat: menu pop-up css + liberação -> miniaplicativo WeChat: menu pop-up css + comutação multilíngue miniaplicativo WeChat de função: menu pop-up css + função de comutação multilíngue Miniaplicativo WeChat: menu pop-up css + liberação da função de comutação multilíngue -> miniaplicativo WeChat Programa: menu pop-up css + função de comutação multilíngue Miniaplicativo Wechat: menu pop-up css + função de comutação multilíngue Programa pequeno: menu pop-up css + função de comutação multilíngue Programa pequeno WeChat: menu pop-up css + função de comutação multilíngue Release -> Programa pequeno WeChat: pop-up css menu up + função de comutação multilíngue Pequeno programa WeChat: menu pop-up css + função de comutação multilíngue WeChat Mini Program: menu pop-up css + função de comutação multilíngue Release -> WeChat Mini Program: menu pop-up css + função de comutação multilíngue WeChat Mini Program: menu pop-up css + função de comutação multilíngue WeChat Mini Program: menu pop-up css + função de comutação multilíngue Function Distribution -> WeChat applet: menu pop-up css + multi -função de troca de idioma Applet WeChat: menu pop-up css + função de troca multilíngue Miniaplicativo WeChat: menu pop-up css + função de troca multilínguePublicar -> WeChat Mini Program: menu pop-up css + função de troca de vários idiomas WeChat Mini Program: menu pop-up css + função de troca de vários idiomas WeChat Mini Program: menu pop-up css + função de troca de vários idiomas Publicar função de alternância multilíngue Miniaplicativo WeChat: menu pop-up css + função de alternância multilíngue Miniaplicativo WeChat: menu pop-up css + função de alternância multilíngue