Question

我开始在此adress建立一个博客。在谈到HTMl和CSS时，我差不多是n00b，但我学到了： - （

我有一个问题，即为图标组合两个类。该图标是font-awsome的一部分，重定向到另一个页面。我希望，如果可能的话，在打开新页面之前将其设为动画。

我使用animated.css为其设置动画。只是在我的HTML中添加两个类什么都不做，因为它直接打开新页面（在另一个选项卡中）。

以下是HTML代码的一部分：

<p class="social"> {% for title, link in SOCIAL %} <a href="{{ link }}" target="_blank"> <i class="fa fa-{{ title }} fa-2x"></i> </a> {% endfor %} </p>

以下是css的一部分：

.social { display: inline-block; margin-top: 0px; } .social a { text-decoration: none; margin-left: 15px; text-shadow: 0 1px 3px rgba(0,0,0,0.3); color: #fff; } .links a { font-size: 15px; padding-left: 15px; font-family: sans-serif; letter-spacing: 2px; text-shadow: 0 1px 3px rgba(0,0,0,0.3); text-decoration: none; color: #fff; }

我不知道如何：

在重定向到社交页面之前查看动画

在哪里放置动画图标的类。类声明将是例如：class="animated infinite bounce"。

感谢您的帮助。

Answer 1

我可以请你重新思考。

在获取他们正在寻找的信息之前，不要用他们需要查看的动画来骚扰您的用户，...除非您销售动画图标：）

使用:hover和:active创建效果，剩下的就是。

更新：添加了点击后仍然存在的第二版

.link {
    width: 80px;
    height: 30px;
    background: silver;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    line-height:30px;
}

.link:hover {
    background: lime;
    /* 
      put your animation properties here...  
    */
}
.link:active {
    background: red;
    /* 
      ...or here...  
    */
}

.linker {
    display: none;
}
.linker:checked + a {
  background: yellow;
    /* 
      ...or here.
    */
}

<a class="link">Click me!</a>

<label>
  <input type="checkbox" class="linker"/>
  <a class="link">Click me 2!</a>
</label>

Answer 2

如果您不知道某些setTimeout链接，则有一个简单的解决方案。

http://jsfiddle.net/TGPtG/77/

$('#element').on('click', function (e) {
    e.preventDefault();
    setTimeout(function() {
        $('#element').addClass('fadeOut');
        setTimeout(function() {
            $('#element').removeClass('fadeOut');
            $('#element').addClass('fadeIn');
            setTimeout(function() {
                alert('Here you can make redirect!');
            }, 1000); // time for fadeIn animation
        }, 1500); // time for fadeOut animation
    }, 0); // start fadeOut 
});

动画图标：两个类HTML元素

2 个答案: