我正在尝试<ul>使用CSS过渡进行滑动.
将<ul>在开始关闭height: 0;.悬停时,高度设置为height:auto;.然而,这导致它只是出现而不是过渡,
如果我从那里height: 40px;开始height: auto;,那么它会向上滑动height: 0;,然后突然跳到正确的高度.
如果不使用JavaScript,我怎么能这样做呢？
#child0 {
height: 0;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#parent0:hover #child0 {
height: auto;
}
#child40 {
height: 40px;
overflow: hidden;
background-color: #dedede;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
} …我有一个DOM元素,应用了以下一些/所有效果:
#elem {
-webkit-transition: height 0.4s ease;
-moz-transition: height 0.4s ease;
-o-transition: height 0.4s ease;
transition: height 0.4s ease;
}
我正在编写一个调整此元素大小的jQuery插件,我需要暂时禁用这些效果,以便我可以顺利调整大小.
暂时禁用这些效果(然后重新启用它们)的最优雅方法是什么,因为它们可能是从父母那里应用的,或者可能根本不适用.
这就是我有jsFiddle的链接
nav.main ul ul {
position: absolute;
list-style: none;
display: none;
opacity: 0;
visibility: hidden;
padding: 10px;
background-color: rgba(92, 91, 87, 0.9);
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
display: block;
visibility: visible;
opacity: 1;
}<nav class="main">
<ul>
<li>
<a href="">Lorem</a>
<ul>
<li><a href="">Ipsum</a></li>
<li><a href="">Dolor</a></li>
<li><a href="">Sit</a></li>
<li><a href="">Amet</a></li>
</ul>
</li>
</ul>
</nav>为什么没有过渡？如果我订
nav.main ul li:hover ul {
display: block;
visibility: visible;
opacity: 0; /* changed this …每当我悬停其父元素时,我一直在尝试使用css来显示隐藏的Div淡入淡出.
到目前为止,我所要做的就是让隐藏的div显示,但是没有缓和的过渡.
这是我在JSfiddle上的代码http://jsfiddle.net/9dsGP/
这是我的代码:
HTML:
<div id="header">
<div id="button">This is a Button
<div class="content">
This is the Hidden Div
</div>
</div>
</div>
CSS:
#header #button {width:200px; background:#eee}
#header #button:hover > .content {display:block; opacity:1;}
#header #button .content:hover { display:block;}
#header #button .content {
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
opacity:0;
clear: both;
display: none;
top: -1px;
left:-160px;
padding: 8px;
min-height: 150px; …我有一些我想用CSS3 淡化的元素.它可以简单地通过2个教学班,做和,但问题是褪色的因素是一些下拉菜单,它具有以下要素,所以即便有不透明度:0,其仍然"点击"和元素下它都没有.opacity: 0opacity: 1
如果我添加display: none;属性,则元素不是动画的.
是否可以用css来避免它？
我检查了这个,但没有找到有效的解决方案
我有HTML与动画的目标一个非常基本的片从display: none;到display: block不透明度变化的从0到1.
我正在使用Chrome浏览器,它使用-webkit前缀作为首选项,并进行了-webkit-keyframes转换设置以使动画成为可能.但是,它不起作用,只是改变display而不褪色.
我这里有一个JSFiddle .
<html>
<head>
<style type="text/css">
#myDiv
{
display: none;
opacity: 0;
padding: 5px;
color: #600;
background-color: #CEC;
-webkit-transition: 350ms display-none-transition;
}
#parent:hover>#myDiv
{
opacity: 1;
display: block;
}
#parent
{
background-color: #000;
color: #FFF;
width: 500px;
height: 500px;
padding: 5px;
}
@-webkit-keyframes display-none-transition
{
0% {
display: none;
opacity: 0;
}
1%
{
display: block;
opacity: 0;
}
100%
{
display: block;
opacity: …我正在尝试构建一个React组件来处理淡入和淡出.在下面的代码中,如果我out作为prop 传递给组件,它会在动画制作之前被隐藏为隐藏.我试图让它在默认情况下淡入,然后在我传入out道具时淡出.有人看到这个问题的解决方案吗？
import React from 'react';
import styled, { keyframes } from 'styled-components';
const fadeIn = keyframes`
from {
transform: scale(.25);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
`;
const fadeOut = keyframes`
from {
transform: scale(1);
opacity: 0;
}
to {
transform: scale(.25);
opacity: 1;
}
`;
const Fade = styled.div`
${props => props.out ?
`display: none;`
: `display: inline-block;`
}
animation: ${props => props.out ? fadeOut : fadeIn} 1s linear infinite; …我有以下css规则:
button:hover:after {
content: ' ' attr(title);
}
基本上该按钮具有作为内容和标题属性的fontawesome图标.当您将鼠标悬停在按钮上时,它会添加一个空格,然后将标题添加到按钮的内容中.看到这个JSFiddle
现在问题是,我将如何设置动画？我希望按钮的新宽度是动画的,所以它不会显示为静态和丑陋.
我在我运行的网站上有一个Twitter提要.但是,它会在小屏幕上被切断.我有一个足够高的栏,可以在1行文字中找到最新的推文.如果太长,我希望推文在最后进行椭圆化或淡出.但是在悬停时,我希望文本慢慢向左滑动,从而暴露出隐藏的部分.
当您突出显示标题宽于屏幕的歌曲时,此效果将用于iPod classic.(我希望你明白我的意思.)
我只是好奇我将如何实现这样的东西？如何强制文本保持在一行？
我有几个课:hide是display: none,transparent是opacity: 0.元素pr_container有-webkit-transition: opacity 1s.以下基于JQuery的代码使元素出现在动画中:
pr_container.removeClass("hide");
setTimeout(function() { pr_container.removeClass("transparent"); }, 0);
但是,当我删除setTimeout而只是删除第二个类时,没有动画.为什么？
编辑:我正在使用最新的Chrome,我还没有检查过其他浏览器.
编辑:我尝试将两个调用放在同一个setTimeout回调中 - 没有动画.所以这显然是关于分离.
编辑:这是jsFiddle:http://jsfiddle.net/WfAVj/