transition 相关问题

图书馆（顺丰）库（ggplot2）库（rmapshaper）图书馆（dplyr）图书馆（gganimate） hr_sf <- readRDS(url("https://biogeo.ucdavis.edu/data/gadm3.6/Rsf/gadm36_HRV_1_sf.rds")) hr_sf_small...

r transition gganimate manual

回答 1 投票 0

溢出隐藏和父宽度过渡

这是我能就我的问题实现的最好的小提琴：https://jsfiddle.net/langocha/rofyxbhq/ 当我将鼠标悬停在黄色框上时，我希望在其右侧显示一条消息，然后...

css overflow width transition

回答 1 投票 0

Angular 18 动画 - 状态更改有效，但没有转换

我想在 Angular 18 中实现我的第一个动画。状态更改有效，但我没有得到过渡动画。组件 TS / @Component > 动画：导入 { 触发器、状态、样式、动画...

angular animation triggers transition

回答 1 投票 0

类似于 Illustrator 的 SVG 混合

我正在尝试混合两个矩形。一种具有白色填充，一种具有黑色填充。我已附上迄今为止所拥有的内容，但这与我希望实现的结果完全不同。我读过

svg transition blend

回答 1 投票 0

视图修改器阻止动画 SwiftUI

以下视图在切换选项卡时以立方体旋转效果对内容进行动画处理。该动画通过单击屏幕的左侧或右侧或滑动选项卡来实现。当我添加...

swift swiftui transition

回答 1 投票 0

转换 vuejs 未捕获 RangeError：超出最大调用堆栈大小

我正在学习 vuejs 中的转换。我正在 vuejs 中创建转换并收到错误“超出最大调用堆栈大小”，但如果我注释掉代码，它会正常工作。我仍然...

vue.js vuejs2 transition

回答 1 投票 0

使用翻转过渡更改 leftBarButtonItem？

在我的代码中，我以编程方式将带有 UIButton 的 leftBarButtonItem 更改为 UIActivityIndicatorView，我想知道如何在更改时执行翻转过渡，知道吗？非常感谢。

iphone transition

回答 2 投票 0

React Spring 中的 useTransition 导致过多的重新渲染

我正在使用 React Spring 中的 useTransition 为博客构建动画单词的砖石网格显示。我的工作很大程度上基于 React Spring 的砖石网格官方 Codesandbox 演示，其中...

reactjs animation transition react-spring

回答 2 投票 0

Jira 工作流程导出不包含转换属性

我已从 Jira 的测试实例导出工作流程。然后我将这些工作流程导入到另一个实例。但是，导入的工作流程不包含原始转换属性（

import export workflow jira transition

回答 2 投票 0

jQuery 中的滑动网页过渡

虽然这个网站上有类似的问题，但似乎没有完全回答我的问题...... 我有一个 5 个静态页面的网站，看起来就像美发沙龙的内部。我希望每个页面都经过...

jquery ajax slide transition

回答 2 投票 0

如何使用 CSS 创建从左侧淡入并在右侧结束的背景？

我希望组件内容（背景和文本）使用不透明度或其他效果从左侧淡入。我希望它从左侧开始，淡入完全不透明，在右侧结束。哈...

css animation transition fadein

回答 1 投票 0

JavaScript 的剪辑路径动画不适用于 classList，只能更改样式属性

我使用 CSS 和 JavaScript 制作了这个动画。当我将鼠标悬停在 div 上时，背景颜色会随着圆形动画而变化。这段代码正在运行：我使用 CSS 和 JavaScript 制作了这个动画。当我将鼠标悬停在 div 上时，背景颜色会随着圆形动画而变化。此代码正在运行： <!DOCTYPE html> <html lang="it"> <head> <style> #d1 { width: 300px; height: 300px; background-color: lightblue; position: relative; } #d2 { width: 100%; height: 100%; background-color: orange; clip-path: circle(0% at 0% 50%); transition: clip-path 0.7s ease-in-out; } </style> </head> <body> <h2>The clip-path property</h2> <div id="d1"> <div id="d2"></div> </div> <script> let d1 = document.getElementById("d1"); let d2 = document.getElementById("d2"); d1.addEventListener("mouseenter", function() { d2.style.clipPath = "circle(150% at 0% 50%)"; }); d1.addEventListener("mouseleave", function() { d2.style.clipPath = "circle(0% at 0% 50%)"; }); </script> </body> </html> 我真的不明白为什么这个版本不起作用。它应该是相同的，但它不起作用。添加了“动画”类，但没有任何反应。 <!DOCTYPE html> <html lang="it"> <head> <style> #d1 { width: 300px; height: 300px; background-color: lightblue; position: relative; } #d2 { width: 100%; height: 100%; background-color: orange; clip-path: circle(0% at 0% 50%); transition: clip-path 0.7s ease-in-out; } .animate { clip-path: circle(150% at 0% 50%) } </style> </head> <body> <h2>The clip-path property</h2> <div id="d1"> <div id="d2"></div> </div> <script> let d1 = document.getElementById("d1"); let d2 = document.getElementById("d2"); d1.addEventListener("mouseenter", function() { d2.classList.add("animate"); }); d1.addEventListener("mouseleave", function() { d2.classList.remove("animate"); }); </script> </body> </html> 谁能解释一下为什么它不起作用？谢谢。 Id 选择器优先于类：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity 更换 .animate { clip-path: circle(150% at 0% 50%) } 与： #d2.animate { clip-path: circle(150% at 0% 50%) } <!DOCTYPE html> <html lang="it"> <head> <style> #d1 { width: 300px; height: 300px; background-color: lightblue; position: relative; } #d2 { width: 100%; height: 100%; background-color: orange; clip-path: circle(0% at 0% 50%); transition: clip-path 0.7s ease-in-out; } #d2.animate { clip-path: circle(150% at 0% 50%) } </style> </head> <body> <h2>The clip-path property</h2> <div id="d1"> <div id="d2"></div> </div> <script> let d1 = document.getElementById("d1"); let d2 = document.getElementById("d2"); d1.addEventListener("mouseenter", function() { d2.classList.add("animate"); }); d1.addEventListener("mouseleave", function() { d2.classList.remove("animate"); }); </script> </body> </html>

javascript css css-animations transition clip-path

回答 1 投票 0

VueJS/Vuetify：使用动画/过渡更改宽度

这是我的应用程序组件：这是我的应用程序组件： <template> <v-app id="inspire"> <v-main> <v-container fluid> <v-row> <v-col :cols="dynamicCol"> <worldmap></worldmap> </v-col> </v-row> </v-container> </v-main> </v-app> </template> <script> import WorldMap from "./components/WorldMap"; export default { props: { source: String }, components: { worldmap: WorldMap }, computed: { changeDynamicCol() { return this.$store.state.lineData.data.length; } }, watch: { changeDynamicCol(value) { if (value > 0) { this.dynamicCol = 9; } } }, data: () => ({ dynamicCol: 12, drawer: null }), created() { this.$vuetify.theme.dark = true; } }; </script> <style scoped></style> 我的应用程序从一个空数组开始，当我接收数据时，第一个容器的宽度从 12 缩小到 9。代码本身工作正常，但是里面的图表会对视口中的变化做出反应，所以 get 目前只是隔断。一般来说，动画效果看起来要好得多。有谁知道我是否以及如何使用过渡或其他动画来更改 v-col 的宽度？我认为你使用观察者的方式是错误的。在这里我展示了我如何看待你的情况，但我不确定它是否正常工作。如果还有更多问题可以在评论里回复我 <template> <v-app id="inspire"> <v-main> <v-container fluid> <v-row> <v-col :cols="columnCount"> <worldmap></worldmap> </v-col> </v-row> </v-container> </v-main> </v-app> </template> <script> import WorldMap from "./components/WorldMap"; import { mapState } from 'vuex' export default { props: { source: String }, components: { worldmap: WorldMap }, computed: { ...mapState({ lineData: state => state.lineData.data.length }), columnCount() { if (this.lineData > 0) { return 9 } return 12 } }, data: () => ({ drawer: null }), }; </script> 我只需添加一个设置了过渡属性的类即可获得网格大小以对其宽度进行动画处理。 <template> <v-app> <v-container> <div> <v-row> <v-col> <v-btn @click="updateColSize(8,4)">8,4</v-btn> <v-btn @click="updateColSize(6,6)">6,6</v-btn> <v-btn @click="updateColSize(4,8)">4,8</v-btn> </v-col> </v-row> <v-row> <v-col :cols="colsize1" class="animateMe"> <v-text-field color="red" placeholder="Testing" variant="solo-filled" ></v-text-field> </v-col> <v-col :cols="colsize2" class="animateMe" color="primary"> <v-text-field color="red" placeholder="Testing" variant="solo-filled" ></v-text-field> </v-col> </v-row> </div> </v-container> </v-app> </template> <script setup> import { ref } from 'vue' const colsize1 = ref(6) const colsize2 = ref(6) const updateColSize = (col1, col2) => { colsize1.value = col1 colsize2.value = col2 } </script> <style> .animateMe { transition: all 1s; } </style> https://play.vuetifyjs.com

vue.js vuetify.js transition

回答 2 投票 0

transition 相关问题

最新问题