嗨伙计!

我一直在阅读Chris Coyer 撰写的精彩文章"使用SVG"(http://css-tricks.com/using-svg/),并决定使用一些东西制作动画徽标.但我有点打架.我会解释一下.

我正在使用.svg文件作为徽标.我正在使用<object>标签在html文件中提取文件.在SVG文件中,我使用css3动画来对svg中的对象做一些技巧.

使用带有css3动画的svg文件,<object>标签运行良好.但是当我尝试将其置于<a>标签内时,问题就出现了.我正在使用一个技巧指向JohanHernández对文章的评论(我不知道这个技巧的起源),并在这个小提琴中举例说明:http://jsfiddle.net/WEbGd/.

问题是,链接有效,但SVG内部没有css3动画.我知道这是因为z-index诀窍...但我没有找到更好的方法.

也许有人有建议让这项工作,或至少是另一种方法？我制作了一支笔来帮助理解我在做什么:http://codepen.io/seraphzz/pen/CJrBp.

这是我为测试目的而制作的svg代码:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="176.5px" height="63.9px" viewBox="0 0 176.5 63.9" enable-background="new 0 0 176.5 63.9" xml:space="preserve" id="logo-svg">
<style>
    .style3{
        fill:   #9F4400;
    }
    .style4{
        fill:   #9331D3;
    }

    #logo-svg, #one{
        -webkit-transform-origin: center center;
           -moz-transform-origin: center center;
             -o-transform-origin: center center;
            -ms-transform-origin: center center;
                transform-origin: center center; …

我在使用 box-shadow 和 text-shadow Android Chrome 时遇到了一些非常奇怪的错误。我桌面上的 Chrome 工作正常，但在 Android 上，它显示出奇怪的阴影效果。查看此屏幕截图以更好地了解发生了什么：

如您所见，Android 上的 Chrome 以不同的方式呈现 text-shadow 和 box-shadow。这是我用于菜单标签和汉堡菜单的代码示例：

#menu-toggle{
    position: fixed;
    top: 17px;
    right: 13px;
    z-index: 120;
    padding: 0;
    color: #fff;
    font-family: 'Katahdin Round',Arial,Helvetica,sans-serif;
    border: none;
    background-color: transparent;
    outline: 0;
    text-shadow: 0 0 7px rgba(17,17,17,.3);
}
#menu-toggle .bottom, #menu-toggle .middle, #menu-toggle .top{
    position: absolute;
    left: 0;
    width: 21px;
    height: 3px;
    background-color: #fff;
    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
    -webkit-box-shadow: 0 0 7px rgba(17,17,17,.3);
            box-shadow: 0 0 …

我正在尝试使用一个单选按钮集合来设置一个简单的Vue实例。目的是，如果用户单击已经选中的单选按钮，它将取消选中相应的单选按钮。但是我还不能使用Vue做到这一点。到目前为止，这是我的代码：

HTML：

<div id="app">
    <div v-for="(val, key) in list">
        <input type="radio" name="radio" :value="val" v-model="selected" :id="val">
        <label :for="val" @click="uncheck( val )">{{ val }}</label>
    </div>
    <button @click="uncheckAll">Uncheck all</button>
</div>

JS：

var app = new Vue({
        el: '#app',
        data : {
            list: [ 'one', 'two', 'three' ],
            selected: 'two',
        },
        methods : {
            uncheck: function( val ){
                console.log( val, this.selected );
                if ( val == this.selected ){
                    this.selected = false;
                }
            },
            uncheckAll: function(){
                this.selected = false;
            }
        }
})

似乎uncheck调用了该方法，但是单选按钮触发了一个 …

人!

这是我第一次来这里问问题,到目前为止,总是遇到问题时,我可以在这里找到一个好的答案.所以,首先,感谢这个惊人的社区!

现在让我们来解决问题:

我正在做一个响应式菜单,检查window.resize事件,当它符合最小浏览器宽度时,允许按钮的单击功能.如果浏览器宽度较大,则单击功能未绑定.我需要这样做,因为移动版本上的按钮相同的元素是桌面版本上的可视元素.

问题是,使用我现在的代码,当加载页面时,单击功能正常工作.但是,如果我调整浏览器大小并再次单击该元素,它会不止一次触发该状态,有时会留下不触发该功能的印象.而且,如果我再次调整浏览器的大小,它会触发点击功能,而不是上次点击时.真烦人

为了帮助理解正在发生的事情,我做了一个简单的例子.这是简单的代码(只是为了检查点击功能问题):

HTML:

<ul>
    <li><span class="sub-toggle">Testing 01</span></li>
    <li><span class="sub-toggle">Testing 02</span></li>
    <li><span class="sub-toggle">Testing 03</span></li>
</ul>

CSS:

.sub-toggle{
    display:block;
    padding: 20px;
}

.sub-toggle.active{
    background-color: #ffcc00;
    color: #fff;
}

Javascript(jQuery):

jQuery(function($){

    var i = 1;

    // check if browser size is compatible with click event
    onResize = function() {

        // if browser size is ok, do the click function
        if($(window).width() <= 480){

            // click function
            $('.sub-toggle').click(function(){

                alert('click');

                if($(this).hasClass('active')){
                    alert('active');
                    $(this).removeClass('active');
                } else {
                    $(this).addClass('active');
                }

            }); …

我刚刚开始使用Gulp来改进我的工作流程.我目前有一个名为stylescompiles .lessfiles的任务,一个名为的任务watch,用于监视任何.less文件中的更改,然后运行styles任务.我gulpfile.js包含这段代码:

var gulp = require( 'gulp' ),
        less = require( 'gulp-less' ),
        autoprefixer = require( 'gulp-autoprefixer' ),
        minifycss = require( 'gulp-minify-css' ),
        jshint = require( 'gulp-jshint' ),
        uglify = require( 'gulp-uglify' ),
        imagemin = require( 'gulp-imagemin' ),
        rename = require( 'gulp-rename' ),
        clean = require( 'gulp-clean' ),
        concat = require( 'gulp-concat' ),
        notify = require( 'gulp-notify' ),
        cache = require( 'gulp-cache' ),
        header = require( 'gulp-header' …