694 lines
17 KiB
Plaintext
694 lines
17 KiB
Plaintext
<script lang="ts" setup>
|
|
import { getCurrentInstance, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, onUpdated } from "vue"
|
|
import { colors, getDefaultColor, getDefaultColorObj, getTextColorObj, getThinColorObj, setTextColorLightByDark } from "../../core/util/xCoreColorUtil.uts"
|
|
import { toFillMarginAr, checkIsCssUnit, getUnit, getUid } from "../../core/util/xCoreUtil.uts"
|
|
import { xConfig, xProvitae } from "../../config/xConfig.uts"
|
|
import { XACTION_MENU_ITEM_INFO } from "../../interface.uts"
|
|
|
|
/**
|
|
* 内部使用：动作菜单项目类型
|
|
*/
|
|
type XACTION_MENU_ITEM_INFO_PRIVATE = {
|
|
iconSize: string,
|
|
fontSize: string,
|
|
iconColor: string,
|
|
fontColor: string,
|
|
icon: string,
|
|
disabled: boolean,
|
|
id: string,
|
|
text: string,
|
|
}
|
|
|
|
/**
|
|
* @name 动作菜单面板 xActionMenu
|
|
* @page /pages/index/action-menu
|
|
* @category 反馈组件
|
|
* @description 从底部弹出来的操作菜单。
|
|
* @constant 平台兼容
|
|
* | Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
|
|
| --- | --- | --- | --- | --- | --- | --- | --- |
|
|
| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
|
|
*/
|
|
defineOptions({ name: "xActionMenu" })
|
|
|
|
const i18n = xConfig.i18n
|
|
const proxy = getCurrentInstance()?.proxy ?? null;
|
|
defineSlots<{
|
|
trigger(props: { show: boolean }): any
|
|
}>()
|
|
|
|
const emits = defineEmits([
|
|
/**
|
|
* 取消时触发
|
|
*/
|
|
'cancel',
|
|
/**
|
|
* 点击遮罩事件
|
|
*/
|
|
'click',
|
|
/**
|
|
* 关闭是触发
|
|
*/
|
|
'close',
|
|
/**
|
|
* 打开时触发
|
|
*/
|
|
'open',
|
|
/**
|
|
* 打开前执行
|
|
*/
|
|
'beforeOpen',
|
|
/**
|
|
* 关闭前执行
|
|
*/
|
|
'beforeClose',
|
|
/**
|
|
* 等同v-model:show
|
|
*/
|
|
'update:show',
|
|
/**
|
|
* 项目被点击时触发
|
|
* @param {Number} index - 项目索引
|
|
*/
|
|
'item-click'
|
|
])
|
|
|
|
export type xActionMenuPropsType = {
|
|
/**
|
|
* 自定义遮罩样式
|
|
*/
|
|
customStyle: string,
|
|
/**
|
|
* 标题,请选择
|
|
*/
|
|
title: string,
|
|
/**
|
|
* 是否显示标题
|
|
*/
|
|
showTitle: boolean,
|
|
/**
|
|
* 是否显示关闭
|
|
*/
|
|
showClose: boolean,
|
|
/**
|
|
* 遮罩是否允许点击被关闭
|
|
*/
|
|
overlayClick: boolean,
|
|
/**
|
|
* 选项点击时，是否允许关闭弹层。
|
|
*/
|
|
cellClickClose: boolean,
|
|
/**
|
|
* 显示可v-model:show双向绑定
|
|
*/
|
|
show: boolean,
|
|
/**
|
|
* 显示取消按钮
|
|
*/
|
|
showCancel: boolean,
|
|
/**
|
|
* 动画时间
|
|
*/
|
|
duration: number,
|
|
/**
|
|
* 打开方向为上和下时的圆角
|
|
* 空值时，取全局配置的圆角。注意是取drawer的圆角，统一弹层的圆角
|
|
*/
|
|
round: string,
|
|
/**
|
|
* 弹层最大的高度值，默认为屏幕的可视高
|
|
* 提供值时不能为百分比，可以是px,rpx单位数字。如果你不带单位，默认转换为rpx单位。
|
|
*/
|
|
maxHeight: string,
|
|
/**
|
|
* 菜单条目
|
|
*/
|
|
list: XACTION_MENU_ITEM_INFO[],
|
|
/**
|
|
* 弹层的层，两边是否留空白间隙，包括底部。
|
|
*/
|
|
space: boolean,
|
|
/**
|
|
* 打开dom的延迟量，如果你打开 弹窗在ios正常。
|
|
* 请不要修改此值。如果遇到打不开，或者 打开 后没动画，关闭不了等可能是sdk bug导致
|
|
* 此时需要加大值来避免。具体加多少以你弹窗内的节点复杂度有关，需要你自行压力测试。
|
|
* 此值仅在ios下生效。
|
|
*/
|
|
watiDuration: number
|
|
}
|
|
|
|
const props = withDefaults(defineProps<xActionMenuPropsType>(), {
|
|
customStyle: "",
|
|
title: "",
|
|
showTitle: true,
|
|
showClose: false,
|
|
overlayClick: true,
|
|
cellClickClose: true,
|
|
show: false,
|
|
showCancel: true,
|
|
duration: 350,
|
|
round: "",
|
|
maxHeight: "",
|
|
list: [] as XACTION_MENU_ITEM_INFO[],
|
|
space: true,
|
|
watiDuration: 120
|
|
})
|
|
|
|
// 响应式数据
|
|
const _width = ref(0)
|
|
const _height = ref(0)
|
|
const showOverflay = ref(false)
|
|
const showOverflayRef = ref<UniElement | null>(null)
|
|
const xActionMenuWrapContentRef = ref<UniElement | null>(null)
|
|
const actioning = ref(false)
|
|
const status = ref("")
|
|
const id = ref("xActionMenu" + getUid())
|
|
const wrapId = ref("xActionMenuWrap" + getUid())
|
|
const first = ref(true)
|
|
const tid = ref(0)
|
|
const windtop = ref(0)
|
|
const nowClickIndex = ref(-1)
|
|
const clienEventType = ref('')
|
|
// #ifdef H5
|
|
const teleportElH5 = ref("uni-app")
|
|
const teleportTarget = ref<string | null>(null)
|
|
const getTeleportTarget = () => {
|
|
try {
|
|
if(status.value == ''||status.value=='close') return 'uni-app'
|
|
// 优先尝试 uni-page
|
|
if (document.querySelector('uni-page')) {
|
|
return 'uni-page'
|
|
}
|
|
// 优先尝试 uni-app
|
|
if (document.querySelector('uni-app')) {
|
|
return 'uni-app'
|
|
}
|
|
// 备用方案：尝试 app
|
|
if (document.querySelector('#app')) {
|
|
return '#app'
|
|
}
|
|
// 最后备用：body
|
|
return 'body'
|
|
} catch (error) {
|
|
console.warn('Failed to get teleport target:', error)
|
|
return 'body'
|
|
}
|
|
}
|
|
|
|
// 检查teleport目标是否可用
|
|
const isTeleportTargetValid = (target: string) => {
|
|
try {
|
|
return !!document.querySelector(target)
|
|
} catch {
|
|
return false
|
|
}
|
|
}
|
|
// #endif
|
|
|
|
// 计算属性
|
|
|
|
function getFontSize(size: string): string {
|
|
let fontSize = checkIsCssUnit(size, xConfig.unit);
|
|
if (xConfig.fontScale == 1) return fontSize;
|
|
let sizeNumber = parseInt(fontSize)
|
|
if (isNaN(sizeNumber)) {
|
|
sizeNumber = 14
|
|
}
|
|
return (sizeNumber * xConfig.fontScale).toString() + getUnit(fontSize)
|
|
}
|
|
|
|
const _customStyle = computed((): string => props.customStyle)
|
|
const _show = computed((): boolean => props.show)
|
|
const _showClose = computed((): boolean => props.showClose)
|
|
const _duration = computed((): number => props.duration)
|
|
const _cellClickClose = computed((): boolean => props.cellClickClose)
|
|
const _showTitle = computed((): boolean => props.showTitle)
|
|
const _space = computed((): boolean => props.space)
|
|
const _showCancel = computed((): boolean => props.showCancel)
|
|
|
|
const _title = computed((): string => {
|
|
if (props.title == '') return i18n.t("tmui4x.actionMenu.title")
|
|
return props.title
|
|
})
|
|
|
|
const _round = computed((): string => {
|
|
let round = props.round;
|
|
if (round == "") {
|
|
round = xConfig.drawerRadius
|
|
}
|
|
let radius = checkIsCssUnit(round, xConfig.unit);
|
|
if (!_space.value) {
|
|
return `${radius} ${radius} 0px 0px`
|
|
}
|
|
return `${radius}`
|
|
})
|
|
|
|
const _maxHeight = computed((): string => {
|
|
if (props.maxHeight == "") return "80%"
|
|
return checkIsCssUnit(props.maxHeight, xConfig.unit);
|
|
})
|
|
|
|
const _animationFun = computed((): string => xConfig.animationFun)
|
|
|
|
const __height = computed((): string => {
|
|
let h = '100%';
|
|
// #ifdef WEB
|
|
h = `calc(100% - ${windtop.value}px)`
|
|
// #endif
|
|
return h;
|
|
})
|
|
|
|
const _bgColor = computed((): string => {
|
|
return xConfig.dark == 'dark' ? xConfig.sheetDarkColor : "#f5f5f5"
|
|
})
|
|
|
|
const _cellBgColor = computed((): string => {
|
|
return xConfig.dark == 'dark' ? xConfig.inputDarkColor : "#ffffff"
|
|
})
|
|
|
|
const _list = computed((): XACTION_MENU_ITEM_INFO_PRIVATE[] => {
|
|
return props.list.map((el: XACTION_MENU_ITEM_INFO): XACTION_MENU_ITEM_INFO_PRIVATE => {
|
|
let psd = el.disabled == null ? false : (el.disabled!)
|
|
let defaultSize = getFontSize('16');
|
|
let temiconcolor = el.iconColor != null ? getDefaultColor(el.iconColor as string) : '#333333';
|
|
let temfontcolor = el.iconColor != null ? getDefaultColor(el.iconColor as string) : '#333333';
|
|
let iconColor = xConfig.dark == 'dark' ? setTextColorLightByDark(temiconcolor) : temiconcolor;
|
|
let fontColor = xConfig.dark == 'dark' ? setTextColorLightByDark(temfontcolor) : temfontcolor;
|
|
return {
|
|
iconSize: el.iconSize != null ? (getFontSize(el.iconSize!)) : defaultSize,
|
|
icon: el.icon != null ? (el.icon!) : '',
|
|
fontSize: el.fontSize != null ? (getFontSize(el.fontSize!)) : defaultSize,
|
|
iconColor: iconColor,
|
|
fontColor: fontColor,
|
|
disabled: psd,
|
|
id: el.id,
|
|
text: el.text,
|
|
} as XACTION_MENU_ITEM_INFO_PRIVATE
|
|
})
|
|
})
|
|
|
|
// 方法
|
|
|
|
function setStyleAni() {
|
|
let watiDuration = 60;
|
|
// #ifdef APP-IOS
|
|
watiDuration = props.watiDuration
|
|
// #endif
|
|
try {
|
|
if (status.value == 'open') {
|
|
showOverflay.value = true;
|
|
clearTimeout(tid.value)
|
|
tid.value = setTimeout(function () {
|
|
if (showOverflayRef.value == null || xActionMenuWrapContentRef.value == null) return;
|
|
showOverflayRef.value!.style.setProperty("transition-duration", _duration.value.toString() + 'ms')
|
|
xActionMenuWrapContentRef.value!.style.setProperty("transition-duration", _duration.value.toString() + 'ms')
|
|
showOverflayRef.value!.style.setProperty('opacity', '1')
|
|
xActionMenuWrapContentRef.value!.style.setProperty('transform', `translate(0%,${_space.value ? -24 : 0}rpx)`)
|
|
}, watiDuration);
|
|
} else if (status.value == 'close') {
|
|
showOverflayRef.value!.style.setProperty("transition-duration", _duration.value.toString() + 'ms')
|
|
xActionMenuWrapContentRef.value!.style.setProperty("transition-duration", _duration.value.toString() + 'ms')
|
|
|
|
showOverflayRef.value!.style.setProperty('opacity', '0')
|
|
xActionMenuWrapContentRef.value!.style.setProperty('transform', `translate(0%,100%)`)
|
|
}
|
|
} catch (e) {
|
|
//TODO handle the exception
|
|
console.error("xActionMenu Error:",e)
|
|
}
|
|
}
|
|
|
|
function closeAlert() {
|
|
// ios渲染有时会造成无法触发onEnd事件，导致无法关闭。这是ios渲染的bug造成，无力修复，已向官方反馈
|
|
// 但这牵涉到底层问题。一时无法修复，故在ios特殊处理。后期修复，需要删除此值。
|
|
// #ifdef APP-IOS
|
|
actioning.value = false;
|
|
// #endif
|
|
|
|
if (actioning.value || status.value == 'close') return;
|
|
actioning.value = true;
|
|
status.value = 'close'
|
|
/**
|
|
* 关闭前执行
|
|
*/
|
|
emits('beforeClose')
|
|
setStyleAni();
|
|
}
|
|
|
|
function showAlert() {
|
|
if (actioning.value) return;
|
|
if (status.value == 'open') return;
|
|
|
|
showOverflay.value = true;
|
|
actioning.value = true;
|
|
status.value = 'open'
|
|
|
|
// #ifdef WEB
|
|
teleportTarget.value = getTeleportTarget()
|
|
// #endif
|
|
|
|
/**
|
|
* 打开前执行
|
|
*/
|
|
emits('beforeOpen')
|
|
setStyleAni();
|
|
}
|
|
|
|
function onEnd() {
|
|
actioning.value = false;
|
|
if (status.value == 'close') {
|
|
showOverflay.value = false;
|
|
/**
|
|
* 关闭时执行
|
|
*/
|
|
emits('close')
|
|
/**
|
|
* 等同v-model:show
|
|
*/
|
|
emits('update:show', false)
|
|
if (clienEventType.value == 'click') {
|
|
/**
|
|
* 项目被点击。由于安卓端动画关闭前触发,会触发view渲染异常.导致动画失败.从而造成,下个页面返回时,上页无法执行结束.
|
|
* @param index {number} 当前项目索引。
|
|
*/
|
|
emits('item-click', nowClickIndex.value)
|
|
clienEventType.value = ''
|
|
}
|
|
// #ifdef WEB
|
|
teleportTarget.value = getTeleportTarget()
|
|
// #endif
|
|
} else {
|
|
/**
|
|
* 打开执行的事件
|
|
*/
|
|
emits('open')
|
|
nowClickIndex.value = -1
|
|
}
|
|
}
|
|
|
|
function overTouch(evt: UniTouchEvent) {
|
|
// #ifdef WEB
|
|
evt.preventDefault()
|
|
// #endif
|
|
// #ifdef APP
|
|
evt.stopPropagation()
|
|
// #endif
|
|
}
|
|
|
|
function onCancel() {
|
|
closeAlert();
|
|
emits('cancel')
|
|
}
|
|
|
|
function itemClick(index: number, disabled: boolean) {
|
|
if (actioning.value || disabled || status.value == 'close') return;
|
|
nowClickIndex.value = index;
|
|
if (!_cellClickClose.value) return;
|
|
clienEventType.value = 'click'
|
|
closeAlert()
|
|
}
|
|
|
|
function overflayMoveTouch(evt: TouchEvent) {
|
|
evt.preventDefault();
|
|
}
|
|
|
|
function onClickOverflowy(evt: Event) {
|
|
evt.stopPropagation()
|
|
emits("click")
|
|
if (!props.overlayClick) return;
|
|
onCancel();
|
|
}
|
|
|
|
function openDrawer() {
|
|
showAlert();
|
|
}
|
|
|
|
// 监听器
|
|
watch((): boolean => props.show, (newval: boolean) => {
|
|
if (newval) {
|
|
showAlert()
|
|
} else {
|
|
closeAlert()
|
|
}
|
|
})
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
let sys = uni.getWindowInfo()
|
|
// #ifndef APP
|
|
_width.value = sys.windowWidth
|
|
_height.value = sys.windowHeight;
|
|
windtop.value = sys.windowTop;
|
|
// #endif
|
|
// #ifdef APP
|
|
_width.value = sys.windowWidth
|
|
_height.value = sys.windowHeight + 44;
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
nextTick(() => {
|
|
teleportTarget.value = getTeleportTarget()
|
|
})
|
|
// #endif
|
|
|
|
if (_show.value) {
|
|
tid.value = setTimeout(() => {
|
|
showAlert();
|
|
}, 50)
|
|
}
|
|
})
|
|
|
|
// 监听页面变化，重新获取teleport目标
|
|
onUpdated(() => {
|
|
// #ifdef H5
|
|
if (teleportTarget.value && !isTeleportTargetValid(teleportTarget.value)) {
|
|
teleportTarget.value = getTeleportTarget()
|
|
}
|
|
// #endif
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
clearTimeout(tid.value)
|
|
})
|
|
|
|
defineExpose({
|
|
/** 打开 **/
|
|
open: () => showAlert(),
|
|
/** 关闭 **/
|
|
close: () => closeAlert()
|
|
})
|
|
|
|
</script>
|
|
<template>
|
|
<view>
|
|
<view @click="openDrawer" >
|
|
<!--
|
|
@slot 标签触发显示遮罩，免于使用变量控制
|
|
@prop {Boolean} show - 当前是否已显示
|
|
-->
|
|
<slot name="trigger" :show="_show"></slot>
|
|
</view>
|
|
|
|
<!-- #ifdef H5 -->
|
|
<teleport :to="teleportTarget || teleportElH5" :disabled="!teleportTarget">
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<root-portal>
|
|
<!-- #endif -->
|
|
|
|
<view
|
|
@click="onClickOverflowy"
|
|
@touchmove="overTouch"
|
|
v-if="showOverflay"
|
|
:id="id"
|
|
ref="showOverflayRef"
|
|
class="xActionMenuWrap xActionMenuWrap_bottom"
|
|
:style="[{width:'100%',top:windtop+'px',height:__height,'transition-timing-function':_animationFun},_customStyle]">
|
|
<!-- @touchmove="overflayMoveTouch" -->
|
|
<view
|
|
@transitionend="onEnd"
|
|
@click.stop=""
|
|
:class="[_space?'onOpenSpace':'']"
|
|
class="xActionMenuWrapContent xActionMenuWrapContent_bottom"
|
|
ref="xActionMenuWrapContentRef"
|
|
:id="wrapId" :style="{
|
|
borderRadius:_round,
|
|
'transition-timing-function':_animationFun,
|
|
backgroundColor:_bgColor
|
|
}">
|
|
<x-icon v-if="_showClose" class="xActionMenuXclose" @click="closeAlert" color="#dcdcdc" font-size="21"
|
|
name="close-circle-fill"></x-icon>
|
|
<view>
|
|
<view v-if="_showTitle" class="xActionMenuTitleBox" :style="{backgroundColor:_cellBgColor}">
|
|
<!--
|
|
@slot 标题插槽
|
|
@prop {Boolean} show - 当前是否已显示
|
|
-->
|
|
<slot name="title" :show="_show">
|
|
<text class="xActionMenutitleBox">{{_title}}</text>
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
<view class="xActionMenuWrapContentBox" :style="{maxHeight:_maxHeight!=''?_maxHeight:'100%'}">
|
|
|
|
<scroll-view :style="
|
|
{
|
|
flex:1,backgroundColor:_bgColor
|
|
}
|
|
" :scroll-y="true" :rebound="false">
|
|
<!--
|
|
@slot 默认插槽
|
|
@prop {Boolean} show - 当前是否已显示
|
|
-->
|
|
<slot name="default" >
|
|
<view v-for="(item,index) in _list" :key="index" @click="itemClick(index,item.disabled)"
|
|
:style="{backgroundColor:_cellBgColor,opacity:item.disabled?'0.5':'1'}"
|
|
class="xActionMenuItem" :hover-class="item.disabled?'':'xActionMenuHover'"
|
|
hover-stay-time="100" hover-start-time="10">
|
|
<x-icon v-if="item.icon!=''" :color="item.iconColor" :name="item.icon"
|
|
:style="{'margin-right': '10rpx'}"></x-icon>
|
|
<text class="xActionText" :style="{fontSize:item.fontSize,color:item.fontColor}">{{item.text}}</text>
|
|
</view>
|
|
</slot>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view @click="onCancel" hover-class="xActionMenuHover" :style="{backgroundColor:_cellBgColor}" hover-stay-time="100" hover-start-time="10"
|
|
v-if="_showCancel" class="xActionMenuFooter">
|
|
<x-text font-size='16' class="xActionMenuFooterText">
|
|
<!-- 取消 -->
|
|
{{i18n.t("tmui4x.cancel")}}
|
|
</x-text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
</root-portal>
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
</teleport>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
<style>
|
|
.xActionText{
|
|
lines: 1;
|
|
|
|
}
|
|
.xActionMenuWrapContentBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
.xActionMenuItem {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 50px;
|
|
margin-bottom: 1px;
|
|
|
|
|
|
}
|
|
|
|
.xActionMenuFooter {
|
|
width: 100%;
|
|
margin-top: 8px;
|
|
/* background-color: #ffffff; */
|
|
height: 50px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.xActionMenuHover {
|
|
/* background-color: #f7f7f7; */
|
|
}
|
|
|
|
.xActionMenuFooterText {
|
|
font-size: 16px;
|
|
color: #333333;
|
|
text-align: center;
|
|
}
|
|
|
|
.xActionMenuXclose {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 6px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.xActionMenuTitleBox {
|
|
height: 44px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.xActionMenutitleBox {
|
|
max-width: 175px;
|
|
overflow: hidden;
|
|
lines: 1;
|
|
text-overflow: ellipsis;
|
|
font-size: 14px;
|
|
color: #888888;
|
|
}
|
|
|
|
.xActionMenuWrap_bottom {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
|
|
}
|
|
|
|
|
|
.xActionMenuWrapContent {
|
|
transition-duration: 350ms;
|
|
transition-property: transform;
|
|
/* background-color: #f5f5f5; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 500px;
|
|
flex: 1;
|
|
}
|
|
|
|
.onOpenSpace {
|
|
margin: 0 16px;
|
|
}
|
|
|
|
.xActionMenuWrapContent_bottom {
|
|
transform: translate(0%, 100%);
|
|
/* #ifndef APP */
|
|
overflow: hidden;
|
|
/* #endif */
|
|
}
|
|
|
|
|
|
.xActionMenuWrap {
|
|
background-color: rgba(0, 0, 0, 0.35);
|
|
opacity: 0;
|
|
position: fixed;
|
|
z-index: 1100;
|
|
left: 0;
|
|
top: 0px;
|
|
/* #ifndef APP-HARMONY */
|
|
transition-duration: 350ms;
|
|
/* #endif */
|
|
/* #ifdef APP-HARMONY */
|
|
transition-duration: 0ms;
|
|
/* #endif */
|
|
transition-property: opacity;
|
|
|
|
|
|
}
|
|
</style> |