过渡即时设置边框，缓慢显示

-1

目前我有图像作为复选框，我可以点击然后黄色边框出现过渡。过渡即时设置边框，缓慢显示

显然，当边界出现，所以我设置3px至极的默认保证金消失时，边界正在添加它改变了保证金的东西，一切（边框是3px的太）但因为我使用过渡到边境它长大了，而边界越来越大，所有的图像都在关闭和晃动：D

所以，现在我不得不使3px的边界立即在那里，只要我轻弹它，但它不应该立即显示为3px .. 。我不知道该怎么做，这里是我目前的css

theres一小部分的CSS缺少，但堆栈overf低不让我上传它，因为它不接受它的代码....

img{ 
 
     width: 100%; 
 
     max-width: 380px; 
 
     border: 3px solid rgba(255.0.0.0); 
 
     background-color:black; 
 
     height: 100%; 
 
     max-height: 250px; 
 
     margin: 3px; 
 
     border-radius:15px; 
 
     transition:opacity 2s ease, border 1s ease; 
 
     opacity: 0.5; 
 
    }

<img src="http://placehold.it/380x250" />

来源

2015-07-10 Econ

这是相当难以真正了解你想要什么。但是你总是可以在transition属性中添加'margin 1s ease'。您还可以显示'img：hover'的css或用于触发更改的内容。 – stevenw00

你应该阅读如何在这里输入代码 - 我可以看到你缺少缩进。 *任何*代码应以4个空格开始，以解释为代码。 – wiktus239

添加代码来说明和澄清你的q。 – davidcondrey

为什么不只是有边界那里transparent以及刚刚转型的``边框color`？

img { 
 
    width: 100%; 
 
    max-width: 380px; 
 
    border: 3px solid transparent; 
 
    height: 100%; 
 
    max-height: 250px; 
 
    margin: 3px; 
 
    border-radius: 15px; 
 
    transition: opacity 2s ease, border-color 1s ease; 
 
    opacity: 0.5; 
 
    } 
 
    img:hover { 
 
    border-color: red; 
 
    }

<img src="http://placehold.it/200x200" />

来源

2015-07-10 09:42:00

如果你想不打破布局，同时加入边框，您可以考虑使用

的box-shadow

代替border属性，并过渡这一点。

$('.box').on('click', function() { 
 
    $(this).addClass('box--checked'); 
 
});

.box { 
 
    width: 120px; 
 
    height: 120px; 
 
    transition: box-shadow .3s linear; 
 
    margin-bottom: 12px; 
 
    background-color: #DDD; 
 
    box-shadow: 0px 0px 0px 0px darkorange; 
 
} 
 
.box--checked { 
 
    box-shadow: 0px 0px 0px 6px darkorange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="box box--one">A</div> 
 
<div class="box box--two">B</div> 
 
<div class="box box--three">C</div>

来源

2015-07-10 09:02:02 wiktus239

过渡即时设置边框，缓慢显示

回答

相关问题