过渡后同位素摇动 [英] isotope shakes after the transition

问题描述

我正在使用同位素jQuery插件&我有两个相同的问题：

1. 当我点击一个过滤器，过渡之后，内容抖动一点取而代之。我无法理解为什么会这样。以下是网址 https://dzire2dzine.com/portfolio




2. 我想根据URL参数触发某个过滤器的点击事件。例如，如果有人访问：dzire2dzine.com/portfolio#logo，那么它会过滤到徽标，如果有人访问：dzire2dzine.com/portfolio#web，那么它应该过滤到网络&等等。
   

那么任何人都可以像我一样引导我？
谢谢

解决方案

问题出在您的CSS上，只是删除#portfolios .portfolio，＃portfolio组合：悬停从你的CSS的这部分

  .entry-header div.caption :: after，.entry-header： hover div.caption :: after，div.client div.caption :: after，div.client：hover div.caption :: after，.social，div.portfolio div.caption :: after，div.portfolio：hover div。 caption :: after，.lavaLamp li按钮，.lavaLamp li：悬停按钮，＃portfolios .portfolio，#portfolio .portfolio：hover {
 transition：全部300ms缓出; 
 -webkit-transition：全部300ms缓出; 
 -moz-transition：全部300ms缓出; 
 -ms-transition：全部300ms缓出; 
 -o-transition：全部300ms缓出; 
 
 $ / code> 

问题在于，您正在将CSS3动画应用于所有的特性。

I am using isotope jQuery plugin & I have two questions regarding the same:

1. When I click on a filter, after the transition, content shakes a bit before they takes its places. I am unable to understand why that is happening. Here is the URL https://dzire2dzine.com/portfolio

2. I want trigger a click event to one of the filter, based on the URL parameter. For instance, if someone visit: dzire2dzine.com/portfolio#logo then it will filter to Logo, if someone visit: dzire2dzine.com/portfolio#web then it should filter to Web & so on.

So anyone who can guide me for the same? Thank you,

解决方案

The problem is in your css, just remove "#portfolios .portfolio, #portfolios .portfolio:hover" from this part of your css

.entry-header div.caption::after, .entry-header:hover div.caption::after, div.client div.caption::after, div.client:hover div.caption::after, .social, div.portfolio div.caption::after, div.portfolio:hover div.caption::after, .lavaLamp li button, .lavaLamp li:hover button, #portfolios .portfolio, #portfolios .portfolio:hover {
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
}

The problem is that you are applying CSS3 animation to all propreties.

这篇关于过渡后同位素摇动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！