Vuetify 默认轮播 CSS 选择器,用于减少过渡持续时间

2024-05-06

enter image description hereenter image description hereI need a transition that does not produce the dreaded image blinking for a v-carousel-item. Ideally it's a smooth and quick fade that would work for both transition and reverse-transition. I have tried all the transitions built in to Vuetify as well as a couple of custom ones but nothing works. My issue can be seen CodePen of the issue https://codepen.io/Magiczne/pen/xxGYxyZ and in a reported at GitHub Vuetify Issue https://github.com/vuetifyjs/vuetify/issues/10809.

<div id="app">
  <v-app>
    <v-carousel>
      <v-carousel-item
        v-for="(item,i) in items"
        :key="i"
        :src="item"
        reverse-transition="fade-transition"
        transition="fade-transition"
      ></v-carousel-item>
    </v-carousel>
  </v-app>
</div>

以下是针对当前未决问题的 CSS 解决方法:https://github.com/vuetifyjs/vuetify/issues/10809#issuecomment-629468386 https://github.com/vuetifyjs/vuetify/issues/10809#issuecomment-629468386

.v-carousel .v-window-item {
  position: absolute;
  top: 0;
  width: 100%;
}

这是一个代码笔 https://codepen.io/zed_at_home/pen/VweapGB?editors=1000使用解决方法,内部垂直v-tabs.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vuetify 默认轮播 CSS 选择器,用于减少过渡持续时间 的相关文章

  • 样式标签中的源映射是否有效?

    我在标签和源映射中遇到 CSS 问题 为了缩短项目的加载时间 我改变了将 CSS 放入 HTML 的方式 将其改为 h1 Source maps working wonderfully h1 进入这个
  • 是否可以使用 Flying Saucer (XHTML-Renderer) 将 css 解析为类路径资源?

    我正在尝试将资源打包到 jar 中 但我无法让 Flying Saucer 在类路径上找到 css 我无法轻松构建 URL 来无缝解决此问题 https stackoverflow com questions 861500 url to l
  • 如何向 Rails 应用程序添加自定义字体?

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底
  • 如何适应特定子元素的宽度?

    problem 我正在尝试创建一个技能表 我无法问下一个问题为什么 所以我创建了一个新帐户并询问 当前状态 我想将元素的宽度与 meter 也就是说 如何设定区块的标准 meter 子元素 在上面的 gif 中 img meter 我想要保
  • 淘汰赛绑定,每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div
  • 如何在 Laravel 5.4 中加载 Vue 组件?

    我已经运行 npm run watch 并收到了消息 This dependency was not found in resources assets js app js To install it you can run npm ins
  • 使用@font-face时浏览器下载什么字体

    font face 有点令人困惑 因为所有浏览器都无法决定使用哪种文件格式 下面是我目前正在使用的向网站添加 1 个新字体的方法 您可以看到有 4 个单独的字体文件 我知道每个文件都是因为某些浏览器支持不同的格式 但浏览器是下载所有文件还是
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht
  • 更改

    标签中一个单词的颜色

    我正在处理一份 html 文档 并且只想在我的文档中创建一个单词 p 标记不同的颜色 如果不做完全不同的事情 这可能吗 p p tag p p I want to make only THIS word blue p p style dis
  • 使用组合 API 和 TypeScript 类型系统强类型化 vue 组件的 props

    我正在使用 vue 组合 api 和 typescript 如何使用打字稿输入系统强类型化组件属性 特洛伊 凯西尔的回答并不完全准确 我引用的文档definecomponent https vue composition api rfc n
  • 像在 tumblr 注册页面上那样鬼写

    有谁知道如何创建一个类似 tumblr 的字段 http www tumblr com http www tumblr com 这是一个 URL 字段 其中有一些褪色的文本 然后当您单击它并键入时 它会附加一些文本 tumblr com 您
  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这
  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码
  • CSS 无法从带有 php“includes”的相对路径工作

    文件夹结构 index php includes header html css style css 我的主项目文件夹中有 2 个子文件夹 一个是名为 includes 的文件夹 另一个名为 css 我有我的 index php主文件夹中的
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 嵌套计算操作

    希望这很简单 我想使用CSS calc操作来执行两个计算 我想将宽度设置为等于 100 7 2 但是 如果我尝试在 CSS 计算操作中执行多个操作 则会失败 width calc 100 7 2 如何在一个 CSS 语句中执行多个计算操作
  • 使用带有少量项目的 v-slide-group 时出现问题

    我在使用 v slide group 时遇到问题 有时我有 2 3 个项目 有时我有 10 个或更多项目 但项目较少时 它不会显示箭头 幻灯片项目也不居中 这是我的 HTML div div
  • 如何垂直对齐div内的图像

    如何在包含的内容中对齐图像div Example 在我的示例中 我需要将 img in the div with class frame div class frame style height 25px img src http jsfi

随机推荐