javascript - VueJS - 将更多文本插入 div 时平滑过渡
问题描述
我做了这个指令,它基本上隐藏了 div 中的一些文本,当你按下显示更多按钮时,它会显示整个内容。我想让过渡慢一点,这样感觉更好。
有没有办法在指令中做到这一点?那将是理想的,但我无法弄清楚。有什么想法吗?
到目前为止,这是我的代码:
import i18n from '@/services/i18n';
const breakpoints = {
mobile: 552,
tablet: 1024,
desktop: 1920,
};
let threshold = width => {
const { mobile, tablet, desktop } = breakpoints;
if (width <= mobile) {
return 300;
} else if (width > mobile && width < tablet) {
return 600;
} else if (width > tablet && width < desktop) {
return 800;
} else {
return 1000;
}
};
function setElement(element, value, width) {
const button = document.createElement('button');
button.classList.add('readmore-button');
button.innerText = i18n.t('button.show-more');
if (value.length > threshold(width)) {
element.innerText = `${value.slice(0, threshold(width))}...`;
element.appendChild(button);
} else {
element.innerText = value;
}
element.expand = () => {
element.innerText = value;
button.removeEventListener('click', element.expand);
};
button.addEventListener('click', element.expand);
}
const directive = {
bind: (el, { value }) => {
let wWidth = window.innerWidth;
setElement(el, value, wWidth);
},
update: (el, { value }) => {
let wWidth = window.innerWidth;
setElement(el, value, wWidth);
},
unbind: el => {
const button = el.querySelector('button');
if (!button) {
return;
}
button.removeEventListener('click', el.expand);
},
};
export default directive;
解决方案
推荐阅读
- python - 在 Python 中使用 Selenium 浏览链接
- python - Pandas groupby:根据pandas groupby组中另一列中的数据选择一行后如何选择相邻列数据?
- c - 在 Eclipse 中的宏中使用宏粘贴无效
- twilio - Twilio 重定向功能在 twilio studio 上不起作用
- asp.net-web-api - 使用 Azure AD App Only 令牌的自定义 Web api 是否会被 SharePoint Online 限制?
- regex - Java semver 正则表达式中的未封闭字符类
- python - 最小化比尔函数
- google-sheets - 将 ImportData 结果保存在一个单元格中
- php - 带有 eJunkie 的 WooCommerce 自定义支付网关
- laravel-5 - 如何在 Laravel 5.7 中的 Route::group 内的 Routing Route::resource 中设置异常