草庐IT

CSS过渡动画

全部标签

javascript - Angular 5 交错动画 - 如何进行倒序

在使用AngularCDK和开发自定义组件时,我正在尝试使用ngIf和ngFor实现交错动画。动画是一系列简单的淡入。以下简化的HTML:ToggleChild1Child2Child3和组件:@Component({selector:'my-app',templateUrl:'./app.component.html',styleUrls:['./app.component.css'],animations:[trigger('parentAnimation',[transition('void=>*',[query('.child',style({opacity:0})),quer

javascript - 我的心智模型错了吗?如果使用 https 调用页面,则将使用 https 调用相对 css 路径

Ifyourpagegetscalledusinghttpsprotocol,anyrelativepathtoanexternalcsswillbecalledusinghttpsprotocolaswell.Areyoureallyneedtoencrypt/decryptcsscontents?:DHowever,ifyouuseabsolutepathreferringtoanexternalcss,youcanspecifytheprotocoltouse,generallyhttpratherthanhttps.MaybeIamwrong!请让我知道我的心智模型是否完全错误

javascript - 如何使用 CSS 或 Javascript 定位 Mac

我需要在我的样式表中使用特定的Mac样式。最好的方法是什么? 最佳答案 在理想情况下,您不需要为不同的操作系统fork样式。然而,有时特定的设计会需要它-特别是样式表单元素。如果你真的需要,下面的脚本将在html元素上设置一个类:(function(flags,app){os('Win','os-win');os('Mac','os-mac');if(document.documentElement){document.documentElement.className+=flags.join('');}functionos(s,f

javascript - jQuery 动画延迟

如何使用jQuery延迟动画?我需要获取一个navigation展开宽度,然后展开高度,然后reversed做反向动画。代码:$(function(){$("#navli").not("#logo,#navliulli").hover(function(){$(this).animate({width:"200px"},{queue:false,duration:1000});},function(){$(this).animate({width:"30px"},{queue:false,duration:1000});});$("#navli.parent").hover(funct

javascript - 如何让 jQuery 或 Javascript 根据当前 url 更改 css?

我在与我的内容不同的文件中有一个导航区域,我使用phpinclude将两者结合在一起。我希望导航区域链接根据事件页面(即当前URL)更改颜色。所以我希望jQuery或Javascript读取当前URL(实际上只是文件名,如home.html),然后基于它编写CSS。就像,如果url=home.html,更改nav.home.background->blue的css 最佳答案 在你的情况下,你可以尝试这样的事情:$("A").each(function(){if(this.href==document.URL){$(this).add

javascript - 简单路径过渡

我正在尝试实现一个简单的路径转换,如图所示here.我既不是javascript也不是d3魔术师,所以我尽力做到最好:varline=d3.svg.line().x(function(d){returnx(d.date);}).y(function(d){returny(d.price);});svg.append("path").datum(data).attr("class","line").attr("d",line).transition().duration(next.duration||1000).delay(next.delay||0);#notright如何让转换正常工

javascript - 在 jQuery UI 模态对话框中显示 iframe 的加载动画

用户界面专家,我试图在jquery模式对话框中的iframe中加载一个慢速网站,但我遇到了麻烦。这是我的用例:打开一个jquery对话框,带有一个“正在加载...”gif在后台加载不同的URL加载后,将gif替换为URL我可以用下面的代码直接打开URL:varpopup=$('').prependTo('body');popup.prepend('');$('.dialogIFrame').attr("src",'http://myslowsite');$('.dialogIFrame').show();popup.dialog({modal:true,title:'Site',wid

css - 当没有打开 Javascript 时。还有什么解决办法?

我正在做一个网站。我有一张图片,我在CSS中将其设置为display:none。我使用JavaScript来显示它并在页面加载完成后将其滑入。它运行良好。我想在禁用JS的情况下启动网站,看看会发生什么。我重新加载了网页,但图像根本没有显示。这是正常的,因为它已在CSS中设置为display:none。这是我的问题:解决这个问题的方法是什么?我想要一种情况,即使在浏览器中禁用了JS,用户仍然可以看到图像。此时我不希望图像滑入,但我希望它像网页上的任何其他内容一样加载和显示。 最佳答案 您可以检测JS是否已启用(一些类似Moderniz

javascript - 如何为 google maps api 圆制作动画?

我在CSS3中构建了一个脉冲动画我想在googlemapsapi中实现标记不幸的是它不可能直接插入到map中。CSS3动画或是否有任何选项是否可以将googlemapcircle作为动画增加和减少。varmyCity=newgoogle.maps.Circle({center:bigOne,radius:150,strokeColor:"#E16D65",strokeWeight:2,fillColor:"#E16D65",fillOpacity:0});varsmallcircle=newgoogle.maps.Circle({center:smallOne,radius:300,s

javascript - 从 DOM 中删除同级元素时创建 block 元素的平滑过渡

我有一个容器,其工作方式类似于macos中的通知-元素被添加到队列并在特定超时后删除。这很好用,但有一个不和谐的视觉副作用。当它们从DOM中移除时,UI会出现参差不齐的更新,因为堆栈中的下一个元素会填充前一个元素所造成的空白。我希望堆栈中下面的元素能够顺利地向上移动到该空间,最好使用css3,但添加一个transition:all0.5sease-in-out到.notice当其兄弟被移除时,类对该对象没有影响。最小的JS交互:$('#add').click(function(e){e.preventDefault();$('#container').append('Notice#')