I have an input search that I am trying to get ease with a transition css3 effect.
Every time that the user focus on that input, on the right hand will appear a Cancel button which is actually an icon to clean the input. Once that icon appears the width of the input changes, I want to ease the movement of that input because as you know the movement or the transition by default is so rough, I have this JSbin for you to see what I am doing and what I have so far.
the situation begins here
<ion-header-bar>
<label>
<input type="text" class="btnCancel"
placeholder="Sports and leagues finder..."
ng-model="query"
ng-focus="isSearchFocused=true"
ng-blur="isSearchFocused=false">
<div ng-show="query" ng-click="query=''">
<i class="ion-close positive"></i>
</div> -->
</label>
<button ng-show="isSearchFocused"
ng-click="query = ''">
<i class="ion-close-circled"></i>
</button>
</ion-header-bar>
css
.btnCancel {
-webkit-transition : all 2s ease;
transition : all 2s ease;
}
this is with CodePen just in case
Related
I'm trying to style the stripe dropdown select to match bootstrap's select. here is my html
<form id="payment-form">
<div class="form-row">
<div>
<label for="bank-element">
Bank
</label>
<div id="bank-element">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
</div>
<button id="button" data-secret="<?= $intent->client_secret ?>">
Submit Payment
</button>
<!-- Used to display form errors. -->
<div id="error-message" role="alert"></div>
</form>
in my js file i have this
var style = {
base: {
'padding': "10px 12px",
'color': '#495057',
'fontFamily': 'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
'border-color': '#80BDFF',
'outline':'0',
'box-shadow': '0 0 0 .2rem rgba(0,123,255,.25)',
'transition': 'border-color .15s ease-in-out, box-shadow .15s ease-in-out'
},
invalid: {
color: "#fa755a"
}
};
var Bank = elements.create(
'Bank',
{style: style, accountHolderType: 'individual'}
);
id="bank-element" is there the dropdown select is. Anyone know how to do this? or that I'm missing. Thank you
Great question, but unfortunately you're limited to the style options listed here:
https://stripe.com/docs/js/appendix/style
This means that you won't be able to set: border-color, transition, border-color, or outline on the element itself. You can apply a border & animations to the container div, but you won't be able to set up the animation transition on anything inside the Element.
I have trouble in formulating the question, so sorry for that...
my question is about a menu, for context clarity
I try to create a button, or similar, when you click on it (:focus or maybe :checked) a drop-down menu appears with a link , this link is an anchor on the same page #target, and when you click on it, the drop-down menu disappears and you are sent to the target
With a checkbox i can make the menu appear, the link works, but the menu doesn't disappear when clicking on the link (in my case it's a problem since the menu is in position:fixed all over the screen)
With focus on an element, i can make the menu appear, and disappear when i click on the link it contains, but the link doesn't work, as if it disappears too fast to work
I can actually do it with visibility + transition, but i feel like it's a bad hack because i'm not good in css, there must be a clean way, right ?
#target {
margin-top: 500px;
}
#hided_button {
visibility: hidden;
}
.show.normal:focus ~ #hided_button.normal,
.show.delayed:focus ~ #hided_button.delayed,
.show.check:checked ~ #hided_button.check {
visibility: visible;
}
#hided_button.delayed {
visibility: hidden;
transition: all 1s;
}
<em>test with :focus on all kind of elements (it disappear well but link doesn't work) :</em>
<p class="show normal" tabindex="0">p_element</p>
<button class="show normal">button</button>
anchor
<input type="button" id="input_button" class="show normal">
<label for="input_button">input</label>
<a id="hided_button" class="normal" href="#target">go_to</a>
<em><br>--------------<br>test with :focus and delay (it works) :</em>
<p class="show delayed" tabindex="0">p_element</p>
<button class="show delayed">button</button>
anchor
<input type="button" id="input_button2" class="show delayed">
<label for="input_button2">input</label>
<a id="hided_button" class="delayed" href="#target">go_to</a>
<em><br>--------------<br>test with :checked (link works but menu doesn't disapear) :</em>
<input type="checkbox" id="input_button3" class="show check">
<label for="input_button3">checkbox</label>
<a id="hided_button" class="check" href="#target">go_to</a>
<p id="target">target</p>
I am trying to add an animation, where I want the added text to have a 3d effect and rotate 360 degrees at the same time using material ui
<Typography variant="overline" color="secondary" style={{fontFamily:'Roboto'}}>
All about your needs
</Typography>
I want that effect to the above mentioned text , how should I approach this problem?
It's jsut a css behaviour, look at the following:
#keyframes rotatee {
from{transform:rotateY(0deg)}
to {transform:rotateY(360deg)}
}
.toto > span {
animation: rotatee 3s linear infinite;
display:inline-block;
}
<span class="toto">
<span>TEXT</span>
</span>
I am using ngAnimate to animate entries in an ng-repeat. When loading the data all elements are animated as I have defined in my css:
.chat-message.notice.ng-enter {
-webkit-animation: rubberBand 1s;
-moz-animation: rubberBand 1s;
-ms-animation: rubberBand 1s;
animation: rubberBand 1s;
}
This works when a notice is appended with the following html:
<ul>
<li class="media chat-message pointer fade-animate"
ng-repeat-start="message in guestbook.messages track by $index"
ng-if="!message.bot">
<!-- more html -->
</li>
<li class="chat-message notice" ng-repeat-end ng-if="message.bot">
<div>
<p class="text-center">
{{ message.message }}
<small>({{ message.date | amTimeAgo }})</small>
<span class="close pull-right" ng-click="guestbook.remove(message)">×</span>
</p>
</div>
</li>
</ul>
However, when a new message is appended (at the top), every element is again animated. Is there a way that elements animate only once? That when a new message is appended to the array, only that element will animate?
JSFIDDLE
EDIT
After a few clicks on a 'new message', I can see not all notices are animated. Maybe it has something to do with the ng-repeat-start and ng-repeat-end?
If understood correctly just change this:
$scope.messages.unshift(message);
to this:
$scope.messages.push(message);
Even above answer fixed the problem, my solution might be helpful in other scenarios. The fix is pretty straightforward.
Use Angular varible $first and just add CSS class for the first element using ng-class directive in your HTML. In this example, class "first" will be added only to first element in ng-repeat:
ng-class="{'first': $first===true}"
and then apply animation rules to element with "first" CSS class
.chat-message.notice.first.ng-enter {
color:red !important;
font-weight:bold;
animation: rubberBand 1s;
}
Updated JSFIDDLE: http://jsfiddle.net/t6x3a1zj/7/
I made some div's to make buttons, however some of these div's are invisible in IE. In other browsers this worked perfect, just not in IE. Some people said that it would be enough to just delete the browser cache. I did this, but it had no effect. I don't know what I did wrong. it is about these two div's:
<div id="searchButtons">
<!--Inside are the buttons, which are div's that are clickable using a hyperlink-->
<a href="#" onclick="javascript:document.getElementById('SearchForm').submit();"><div id="searchButton" class="searchButton" style="width:70;">
Search
</div></a>
<a href="#" onclick="javascript:document.getElementById('SearchForm').reset();"><div id="resetButton" class="searchButton" style="width:70; left:70;">
Reset
</div></a>
</div>
<div id="loginButtons">
<a href="#" onclick="CheckLoginData(2)"><div id="LoginButton" class="loginButton" style="width:60;">
<!--CheckLoginData(2) is a function, which checks if al inputs are entered, the parameter (2) has to do with the tabs I made in another part of this file-->
Login
</div></a>
<a href="Register.php"><div id="Register" class="loginButton" style="left:60; width:70;">
Register
</div></a><br/>
Forgot password
</div>
before the first div, there is a form which is submitted using this div.
The second div contains some buttons that are used to login, register or to go to forgot password page.
These div's have some css:
div.loginButton,div.searchButton{
position:absolute;
color:blue;
background-color:FFFF99;
height:20;
transition:background-color 0.2s;
-webkit-transition:background-color 0.2s,transform 0.2s;
}
div.loginButton:hover,div.searchButton:hover{
position:absolute;
background-color:CCCC7A;
height:20;
transition:background-color 0.2s;
-webkit-transition:background-color 0.2s,transform 0.2s;
}
#loginButtons,#searchButtons{
position:absolute;
top:130;
height:25;
left:20;
width:140;
}
The strange part is that only the first hyperlink inside each div is invisible. The others are visible. I have tried to use the style attribute display, but it had no effect. I have no clue what I did wrong. Is there any sugestion?
Plugging that code straight into a blank page the links sit on top of each other due to the absolute positioning. Remove the absolute positioning and all your links should be visible.