transition 相关问题

使用javascript或css将元素从一个状态设置为另一个状态。

设置宽度:0不隐藏文本

我想创建一个侧面导航菜单。它在大屏幕上可见,在小屏幕上隐藏,并且在调用 javascript 函数取消隐藏时变得可见。 一切都是w...

回答 3 投票 0

CSS3 SVG 简单过渡:鼠标悬停时出现和消失

我正在尝试使用两个项目进行简单的CSS3过渡:一个svg框(代表svg绘制的徽标)和其后面的标签(代表标题名称标签)。 默认情况下只有盒子... 我正在尝试使用两个项目进行简单的 css3 过渡:一个 svg 框(代表 svg 绘制的徽标)和其后面的 <p> 标签(代表标题名称标签)。 默认情况下,仅应显示该框,而应隐藏文本。当鼠标悬停在 SVG 框上时,该框应通过简单的 CSS 淡入淡出过渡消失(或者甚至更好的阴影模糊以获得加分;-),然后名称标题应在 1 秒内出现焦点(从阴影模糊) . 目前我陷入困境,因为我的代码无法激活鼠标悬停。我在这个阶段做错了什么? svg:hover p 不是我最后一步的正确选择器吗?以及如何设置过渡淡入淡出效果? *{margin: 0; padding: 0;} svg{ position: absolute; fill: rgba(0,200,0,1); z-index: 2; top: 0px; left:0px; display:block; } p{ position: absolute; z-index: 1; top:70px; display: block; color: rgba(0,0,200,0); /* hide the title as default */ } svg:hover{ fill: none; } svg:hover p{ color: rgba(0,0,200,1); /* on mouse over svg, show title. // Doesn't work!! */ } <svg width="100" height="100" viewBox="0 0 100 100"> <rect x="10" y="10" width="100" height="100"/> <p>Title of this Website</p> </svg>http://stackoverflow.com/questions/ask# 您无法将元素放置在 SVG 内。 您应该将 SVG 和段落都放置在容器内,并将悬停效果设置为作用于容器。 对于过渡,请在每个元素上使用过渡属性,或者将其放置在父元素的所有子元素上。 像这样的东西: <style type="text/css"> * {margin: 0; padding: 0;} .svg-container * { -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -o-transition: all 1000ms ease; -ms-transition: all 1000ms ease; transition: all 1000ms ease; } svg { position: absolute; fill: rgba(0, 200, 0, 1); z-index: 2; top: 0; left: 0; display: block; opacity: 1; } p { position: absolute; z-index: 1; top:70px; display: block; color: rgba(0,0,200,0); } .svg-container:hover svg { opacity: 0; } .svg-container:hover p { color: rgba(0,0,200,1); } </style> <div class="svg-container"> <svg width="100" height="100" viewBox="0 0 100 100"> <rect x="10" y="10" width="100" height="100"/> </svg> <p>Title of this Website</p> </div>

回答 1 投票 0

SwiftUI 中子视图的过渡动画

我已经对此进行了多年的研究,但无法在这里或在线找到任何解决如何在子视图出现/消失时创建自定义过渡的答案。 我想做的事...我...

回答 1 投票 0

如何删除具有不同 Transition 的视图背景?

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

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上,看看游乐场。

回答 1 投票 0

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

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

回答 1 投票 0

MariaDB 布尔转换 SQL

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

回答 1 投票 0

第一季度当前季度差异

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

回答 1 投票 0

如何在转场后制作动画

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

回答 1 投票 0

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

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

回答 4 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

WPF 中的颜色过渡

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

回答 5 投票 0

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

我使用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>

回答 0 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.