transition 相关问题

如何删除具有不同过渡的视图背景？ SwiftUI

我将提供一个简化的示例。假设当我切换时，我想立即删除文本的背景，而不需要任何过渡或动画，但让文本本身以不透明度淡出......

更改导航中文本的字体大小

我想在导航时更改文本的字体大小。假设我们在 screen1 中有一个文本小部件，它的字体大小为 14 像素，在 screen2 中有另一个文本小部件，字体大小为 18 像素。 ...

Jetpack Compose 中使用脚手架进行应用栏过渡

我遇到的问题是，在屏幕之间转换时，顶部应用程序栏始终首先出现，并且不跟随预期屏幕的转换。 如何使顶部应用栏...

img 标签不会从其父级继承过渡属性

我希望我的图像标签自动从其祖父元素（Div）继承过渡属性，但它不起作用。我不想再次编写相同的代码，因为还有其他元素......

vue3 中的过渡可以滑入但不能滑出

我有这个代码示例 家长： 切换 我有这个代码示例 家长： <template> <div> <button @click="cartToggle">Toggle</button> </div> <div> <Child :visible="cartVisible" @update:visible="cartToggle" v-show="cartVisible" /> </div> </template> <script setup> import { ref } from "vue"; import Child from "./Child.vue"; const cartVisible = ref(false); const cartToggle = () => { cartVisible.value = !cartVisible.value; }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> span { cursor: pointer; } </style> 孩子： <script setup lang="ts"> import { toRefs, watchEffect, onBeforeUnmount } from "vue"; const props = defineProps({ visible: { type: Boolean, required: true, default: false, }, }); const { visible } = toRefs(props); const emit = defineEmits(["update:visible"]); const hideCartBar = () => { emit("update:visible", false); }; watchEffect(() => { document.body.style.overflow = visible.value ? "hidden" : "auto"; document.body.style.paddingRight = visible.value ? "15px" : "0px"; }); onBeforeUnmount(() => { document.body.style.overflow = "auto"; document.body.style.paddingRight = "0px"; }); </script> <template> <div class="cartbar"> <div class="cartbar-wrapper"> <transition name="fade"> <div v-show="props.visible" class="cartbar-overlay" @click="hideCartBar" ></div> </transition> <transition name="slide"> <div v-show="props.visible" class="cartbar-container"> <div class="cartbar__header"> <h2>Menu</h2> <span @click="hideCartBar" class="cursor-pointer">Close</span> </div> </div> </transition> </div> </div> </template> <style scoped> /* transition */ /* transition */ .fade-enter-from, .fade-leave-to { opacity: 0; } .fade-enter-to, .fade-leave-from { opacity: 1; } .fade-enter-active, .fade-leave-active { transition: opacity 500ms; } .slide-enter-from, .slide-leave-to { transform: translateX(100%); } .slide-enter-to, .slide-leave-from { transform: translateX(0); } .slide-enter-active, .slide-leave-active { transition: transform 500ms; } /* cartbar */ .cursor-pointer { cursor: pointer; } .cartbar-wrapper { transition: visibility 0s 0s; z-index: 1300; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; width: 100%; padding-left: calc(4px * 9); } .cartbar-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); opacity: 1; cursor: pointer; } .cartbar-container { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 460px; height: 100%; overflow: hidden; margin-left: auto; padding: calc(4px * 7); background-color: #f4f2f1; color: #706b5f; } </style> 问题是，当我想切换菜单时..它可以很好地滑入，但不会滑出...加上 - 覆盖层根本没有动画 我做错了什么？ 示例：https://codesandbox.io/p/sandbox/vue-3-glziy 子元素上的 v-show="cartVisible" 会在外转换开始之前删除整个元素。但当简单地移除 v-show 时，.cartbar-wrapper 将覆盖整个屏幕，从而无法按下按钮。您必须更改子组件的结构，以便它可以在没有容器的情况下工作。 一个简单的解决方案是去掉包装纸并将position:fixed放在.cartbar-container上，看看游乐场。

无法使用WithAnimation时如何制作动画？

我在 VStack 上有一堆元素，其可见性取决于布尔值。像这样 如果 numberOfArrayElementsWithValidNames() != 0 { 按钮1() 按钮2() 按钮3() } 该数组被操纵...

MariaDB 布尔转换 SQL

使用 MariaDB 版本 8.0.19，检测布尔转换的最佳方法是什么？ 例如。原始数据可以是： 1 1 1 0 0 1 1 1 0 0 我想计算上升沿转换或下降沿，依此类推

第一季度当前季度差异

我对 DAX 相当陌生，因此正在学习以掌握更多常规。有问题试图解决。我正在尝试计算第一季度和当前季度之间的差异。 启动 Q 当前 Q di...

如何在转场后制作动画

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap"); 身体 { 背景颜色：黑色； 保证金：0； 填充：0； 框大小：边框框； 显示...

css 过渡不透明度淡入淡出背景

我正在做一个过渡，当用户将鼠标悬停在图像上时，它会淡入透明白色。 我的问题是我需要将颜色更改为黑色。我只是简单地尝试过

是否可以使用标准控件生成动画过渡？

是否可以使用VB.NET语言中的标准WinForms控件制作动画，例如Bunifu生成的过渡？ 公开课表格1 私有子 Form1_Load（发送者作为对象，...

CSS 切换，具有扩展 div 的过渡效果 - 将最大高度设置为无穷大替代方案

有一个简单的html+css+js代码来展开/折叠div，具有1秒的效果。 https://jsfiddle.net/zf1rd38y/3/ CSS 代码看起来很简单： .smalldesc { 最大高度：52px； 溢出：隐藏； 特兰...

Flutter 中英雄动画期间文本失去样式

正如您从 gif 和下面的代码中看到的那样，我有一个容器和一个文本小部件，它们都包装在一个英雄小部件中。 单击容器时，将打开第二页。我想要一个...

创建 CSS 动画以实现悬停在元素上的平滑过渡效果？

创建 CSS 动画以在元素上悬停时实现平滑过渡效果，这意味着在元素上悬停时过渡应该出现。 我无法在

WPF 中的颜色过渡

我想对WPF窗口的背景颜色进行颜色过渡。 我怎样才能做到这一点？ 例如： 画笔 i_color = Brushes.Red; //这是初始颜色 画笔 f_color = Brushes.Blue; //第...

如何实现垂直和水平方向的手风琴过渡？

我使用svelte的transition:slide来实现手风琴过渡，演示代码很简单： 从“svelte/transition”导入{slide}； 让显示=假； </script&g...</desc> <question vote="0"> <p>我使用svelte的transition:slide来实现手风琴过渡，演示代码很简单：</p> <pre><code>&lt;script&gt; import { slide } from &#34;svelte/transition&#34;; let show = false; &lt;/script&gt; &lt;main&gt; &lt;div class=&#34;wrapper&#34;&gt; &lt;button on:click={() =&gt; (show = !show)}&gt;active&lt;/button&gt; {#if show} &lt;div transition:slide={{ duration: 300 }}&gt;hidden content hidden content hidden content&lt;/div&gt; {/if} &lt;/div&gt; &lt;/main&gt; &lt;style&gt; .wrapper { border: 1px solid red; padding: 10px; display: inline-block; } &lt;/style&gt; </code></pre> <p>垂直方向的过渡效果很完美，但是水平方向的展开失去了动画，可以通过 <a href="https://svelte.dev/repl/acd001e268dc46dfbbf0c2fa97e8f3ac?version=4.2.7" rel="nofollow noreferrer">https://svelte.dev/repl/acd001e268dc46dfbbf0c2fa97e8f3ac?version=4.2.7</a> .</p> 看到 <p>如果有人能告诉我如何实现垂直和水平方向的手风琴过渡，那就太好了，谢谢。</p> </question> <answer tick="false" vote="0"> <p>您必须进行新的自定义过渡，您可以在此处阅读<a href="https://svelte.dev/docs/element-directives#custom-animation-functions" rel="nofollow noreferrer">https://svelte.dev/docs/element-directives#custom-animation-functions</a>如何做到这一点。</p> <p>就您而言，执行此操作的方法如下：</p> <pre><code>function wop(node, params) { const { height, width } = getComputedStyle(node); const { duration = 500 } = params; return { duration, css: t =&gt; ` clip-path: polygon(0 0, ${t*100}% 0, ${t*100}% ${t*100}%, 0 ${t*100}%); margin-right: calc((${t-1})*${width}); margin-bottom: calc((${t-1})*${height}); overflow-y: hidden; ` } } </code></pre> </answer> </body></html>

元素创建后立即触发转换

我正在尝试创建一个动作，其中创建一个div并立即向上“浮动”直到它离开屏幕。 为了实现这一点，我尝试使用 CSS 过渡，这将完全...

延迟过渡不透明度

我想在3秒后淡出一个元素。我目前正在使用动画来执行此操作，但我刚刚了解了转换延迟，所以我相信我可以删除动画并执行此操作...

悬停时如何过渡，其中悬停时使用动画

我在悬停时在 div 内的 X 轴上对文本从 0 到 100 像素进行动画处理。问题是当我将鼠标悬停在 div 上时，动画会很快恢复。我需要一个过渡效果才能看起来不错。拜托...

带过渡的波纹效果

我正在尝试创建简单的涟漪效果。当我向元素 newClick 添加类时，我预期会产生连锁反应。得到了 troblued，因为附加类是立即的，我看不到效果。你能不能……